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

时间:2012-12-07 18:52:52

标签: jquery html overwrite

我在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

3 个答案:

答案 0 :(得分:6)

您需要在回调之外声明oldNumbers

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

干杯

答案 1 :(得分:1)

您可以使用

将旧值存储为标记的属性
 $('#numbers').attr('data-old-numbers', oldNumbers )

并用

进行检索
 $('#numbers').attr('data-old-numbers')

答案 2 :(得分:0)

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

FIDDLE