2

我有一个 div，我曾经html()更改过它的内容。我正在做一个“取消”按钮，我想html()回到原来的值。

有没有一种有效的方法来做到这一点？我试图避免再次使用 html() 整个代码，因为它看起来不太好并且可能不是最佳实践。

提前非常感谢。问候

4

7 回答 7

5 
// store the old content
var myOldContent = $("#cancelbutton").html();

// change content
$("#cancelbutton").html(someNewContent);

// and change it back
$("#cancelbutton").html(myOldContent);
于 2012-04-23T19:31:26.550 回答
2

如果可能的话，不要使用.html这种方式切换内容——使用两个相邻的、几乎相同的元素，一个使用旧 HTML，一个使用新 HTML，并创建一个hiddenCSS 类display: none并将其分配给第二个元素。hidden然后同时在两个元素上切换此类。

HTML：

<button class="cancel" id="cancel-original">Cancel</button>
<button class="cancel hidden" id="cancel-second">Cancelling...</button>

CSS：

.hidden {
    display: none;
}

查询：

$('button.cancel').click(function() {
    $('button.cancel').toggleClass('hidden'); // toggles both at once
});

http://jsfiddle.net/e9eLP/

于 2012-04-23T19:37:21.217 回答
1

您可以在创建时使用 jQuery 克隆它，当您取消时，删除它并重新克隆旧版本。

于 2012-04-23T19:31:37.150 回答
1

浏览器不跟踪原始值。
但是，您可以在页面加载时自己将原始 HTML 存储到变量中。

于 2012-04-23T19:31:38.553 回答
1

您可以将之前的 HTML 内容保存到一个变量中，然后在取消时从该变量中恢复。

var previousHtml = $('#someElement').html();

然后

$('#someElement').html(previousHtml);
于 2012-04-23T19:31:47.917 回答
1

在更改之前，您需要将其保存在变量中：

<script>
var origHTML = $("#divid").html();
function ResetDiv(){
  $("#divid").html(origHTML);
}
</script>
于 2012-04-23T19:32:11.437 回答
1

通过使用jQuery 的 data() 函数，您可以轻松地在内部保存原始值，然后使用以下内容恢复它：

$('#a').click(function(){
    $('div').data('store',$('div').html()).html('foo');
});​​
$('#b').click(function(){
    $('div').html($('div').data('store'));
});
​

jsFiddle 示例。（请注意，此示例仅用于说明如何使用 data() 存储值，而不是用于生产代码。）

于 2012-04-23T19:36:07.317 回答