Question

我有一个div，我使用html()来更改其内容。我正在做一个“取消”按钮，我想html()回到原始值。

有一种有效的方法吗？我试图再次避免使用html（）整个代码，因为它看起来不太好，可能不是最好的做法。

提前多多感谢。此致

Answer 1

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

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

// and change it back
$("#cancelbutton").html(myOldContent);

Answer 2

如果可能，请不要使用.html以这种方式切换内容 - 使用两个相邻的，几乎相同的元素，一个使用旧HTML，另一个使用new，并创建一个{{1带有hidden的CSS类，并将其分配给第二个元素。然后在两个元素上同时切换此display: none类。

HTML：

hidden

CSS：

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

JQuery的：

.hidden {
    display: none;
}

http://jsfiddle.net/e9eLP/

Answer 3

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

Answer 4

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

Answer 5

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

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

然后

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

Answer 6

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

<script>
var origHTML = $("#divid").html();
function ResetDiv(){
  $("#divid").html(origHTML);
}
</script>

Answer 7

使用jQuery's data() function，您可以在内部轻松保存原始值，然后使用以下内容恢复原始值：

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

<强> jsFiddle example 即可。（请注意，此示例仅用于说明如何使用data（）存储值，而不是用于生产代码。）

在动态更改之前，如何告诉jquery html（）元素到其原始值？

7 个答案: