我有一个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() 存储值,而不是用于生产代码。