Question

我有几个div在页面生命周期中修改了html。如何将其原始内容存储为默认值，以便我可以使用重置按钮调用它们？它们都共享一个相同的类，但每个类都有一个以“message-”开头的唯一类。由于消息类是动态的，我无法事先知道它是什么。如果这是一种更好的方法，则可以将消息切换为ID。

<div class="foo message-heading">some html</div>
<div class="foo message-body">some other html</div>
<div class="foo message-footer">some more html</div>

提前致谢。

Answer 1

如果您使用的是HTML5，则可以使用data-x属性存储原始值。

HTML

<div class="foo message-heading" data-default="some html">some html</div>
<div class="foo message-body" data-default="some other html">some other html</div>
<div class="foo message-footer" data-default="some more html">some more html</div>

的jQuery

$("#btnReset").click(function() {
    $(".foo").each(function() {
        $(this).html($(this).data("default"));
    });
});

Example fiddle

Answer 2

您可以将默认值存储在dom就绪的元素数据中，如此

$(function() {
    $(".class-that-should-have-default-content").each(function() {
        var $this = $(this);
        $this.data("default-content", $this.html());
    }
}

然后根据需要重置它：

$(element).html($(element).data("default-content"));

Answer 3

这是jQuery.data的完美用例，它允许您将数据附加到DOM元素。

示例代码

var element = $('.foo .message-body');
// Save
$.data(element, 'default-value', element.html());

// Load
element.html($.data(element, 'default-value'));

Answer 4

假设你的意思是用HTML标记整个标签我会做这样的事情：

$(".foo").each(function () {
    $(this).data("original", $(this).clone());
});

...然后像这样重置它们：

$(".foo").each(function () {
    $(this).replaceWith($(this).data("original"));
});

使用类存储div的html值，稍后使用jQuery调用它们

4 个答案:

示例代码