我怎样才能告诉 jquery 到 html( ） 一个元素在动态更改之前到它的原始值

How can I tell jquery to html( ) an element to its original value, before it was dynamically changed?

本文关键字：动态 原始 元素 html jquery 一个      更新时间：2023-09-26

我有一个div，我用html()来更改它的内容。我正在执行"取消"按钮，我想html()回原始值。

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

提前非常感谢。问候

// store the old content
var myOldContent = $("#cancelbutton").html();
// change content
$("#cancelbutton").html(someNewContent);
// and change it back
$("#cancelbutton").html(myOldContent);

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

.HTML：

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

.CSS：

.hidden {
    display: none;
}

JQuery：

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

http://jsfiddle.net/e9eLP/

您可以在制作时使用 jQuery 克隆它，当您取消时，删除它并克隆旧版本。

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

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

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

然后

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

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

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

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

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

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

相关文章：