Question

我有这个脚本：

$('#ap').click(function() {
   $('#content-container').html($('#alertpay').html());
    return false;
});

每当有人点击#ap时，它都会在#alertpay中显示#content-container的内容。

但是，我如何制作回复链接，因此当用户点击它时，它会显示#content-container的原始内容？（那里的内容。）

更新我正在尝试使用此代码：

                    <div align="center" id="content-container">
                        <a href="#" id="ap">Show #alertpay</a> 
                    </div>

  <div id="alertpay" style="display:none">
    #alertpay content here.

      <a href="#" id="return-link">RETURN</a>

    </div>


(function(){
    var cchtml;
    $('#ap').click(function(){
       cchtml = $('#content-container').html();
       $('#content-container').html($('#alertpay').html());
       return false;
    });

    $('#return-link').click(function(){
       $('#content-container').html(cchtml);
       return false;
    });
})();

这里不起作用的是我按下RETURN锚链接。它没有做任何事情。

Answer 1

最佳选择是拥有三个容器。最初一空。根据用户行为选择要显示的内容。

$('#ap').click(function() {
   $('#empty-container').html($('#alertpay').html());
    return false;
});

$('#revert-ap').click(function() {
   $('#empty-container').html($('#content-container').html());
    return false;
});

并确保隐藏内容容器和alertpay

Answer 2

(function(){
    var cchtml;
    $('#ap').click(function(){
       cchtml = $('#content-container').html();
       $('#content-container').html($('#alertpay').html());
       return false;
    });

    $('#return-link').click)function(){
       $('#content-container').html(cchtml);
       return false;
    });
})();

Answer 3

如果您有以下标记

，则可以使用.data

<div id="alertpay">
    asd
</div>

<div id="content-container">
    hello
</div>

<a href="#" id="ap">change</a>
<a href="#" id="restore">restore</a>

和jquery

$原始= '';

$('#ap').click(function() {

    if($original.length==0){         
    $('#content-container').data('original', $('#content-container').html());
    $original=$('#content-container').data('original');
    }
   $('#content-container').html($('#alertpay').html());
    return false;
});

$('#restore').click(function() { 
   $('#content-container').html( $('#content-container').data('original'));
    return false;
});

这里是小提琴http://jsfiddle.net/YUGCq/3/

返回“上一个功能”

3 个答案: