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

Question

我在numbersdiv中有一些内容。当我点击numbers-clicker时，数字123456789的内容被保存到oldNumbers变量中，内容被更改为987654321，并且类opened在numbersdiv上切换。当我再次单击numbers-clicker时，我正在尝试恢复原始的旧数字，因此123456789到numbersdiv，而是用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')
});
​

小提琴