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

Question

我在numbersdiv 中有一些内容。当我点击numbers-clicker时，numbers 的内容123456789被保存到 oldNumbers 变量中，内容变为987654321，并且类在divopened上切换。numbers当我再次单击numbers-clicker时，我正在尝试恢复原始的 oldNumbers，因此123456789到numbersdiv，相反，oldNumbers 被覆盖987654321。我们如何确保 oldNumbers 保持作为numbersdiv 的开始内容，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')
});

这是一个小提琴

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')
});
​

小提琴