Question

我在numbers div中有一些内容。当我点击numbers-clicker时，数字123456789的内容会保存到oldNumbers变量，内容会更改为987654321，而opened类会在{{numbers上切换1}} div。当我再次点击numbers-clicker时，我正在尝试恢复原始的oldNumbers，因此将123456789恢复为numbers div，而是使用987654321覆盖oldNumbers。我们如何确保oldNumbers保留为numbers div 123456789的开头内容？

<div id="numbers-clicker">Clicker</div>
<div id="numbers">123456789</div>

$('#numbers-clicker').off('click').on('click',function(){
    $this = $(this);
    var oldNumbers = $('#numbers').html();

    if(!$this.is('.opened')){ 
        $('#numbers').html('987654321'); 
    } else { 
        $('#numbers').html(oldNumbers); 
    }
    $this.toggleClass('opened')
});

Here is a fiddle

Answer 1

您需要在回调之外声明oldNumbers：

var oldNumbers = $('#numbers').html();
$('#numbers-clicker').off(...);

干杯

Answer 2

您可以使用

将旧值存储为标记的属性

 $('#numbers').attr('data-old-numbers', oldNumbers )

并用

进行检索

 $('#numbers').attr('data-old-numbers')

Answer 3

$('#numbers-clicker').data('txt', $('#numbers').text()).on('click', function() {
    $('#numbers').html($(this).is('.opened') ? '987654321' : $(this).data('txt'));
    $(this).toggleClass('opened')
});

FIDDLE

jQuery - 保留原始html内容并检索它，即使被覆盖

3 个答案: