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

【问题标题】：jQuery - Keep original html content and retrieve it, even if overwrittenjQuery - 保留原始 html 内容并检索它，即使被覆盖
【发布时间】：2012-11-25 23:51:16
【问题描述】：

我在numbers div 中有一些内容。当我点击numbers-clicker时，数字123456789的内容被保存到oldNumbers变量中，内容变为987654321，opened类在numbers div上切换。当我再次单击numbers-clicker 时，我正在尝试恢复原始的oldNumbers，因此123456789 到numbers div，相反，oldNumbers 被987654321 覆盖。我们如何确保 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

【问题讨论】：

标签： jquery html overwrite

【解决方案1】：

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

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

干杯

【讨论】：

【解决方案2】：

您可以使用

将旧值存储为标签的属性

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

并用

检索它

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

【讨论】：

@Wonka 这个答案有效，只是您没有正确实施它。很可能您犯的错误与您的问题中的错误相同。
它确实有效，您可以使用 data-* 属性在 DOM 上存储任意信息。

【解决方案3】：

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

FIDDLE

【讨论】：