Question

我正在开发基于小工具/小工具的网站，用户可以在同一页面上同一个小工具/小工具。例如，以下内容可能是小部件/小工具：

<div class="widget widget_1">
    <div class="header widget_header_1">
        <input type="text" class="textbox_1"/><input type="button" class="button_1"/>
    </div>
    <div class="content widget_content_1"></div>
    <div class="footer widget_footer_1"></div>
</div>

然后我可以在屏幕上同时显示许多这些，这就是我使用类而不是id的原因。

在document.ready上，我运行了一个为widget_content_1生成默认值的函数。问题是，当用户添加了另一个相同的窗口小部件时，默认功能会将所有widget_content_1窗口小部件重置为默认值。如何阻止这种情况发生？如何仅对新添加的小部件应用默认值而不影响其他小部件？

目前代码如下：

// on document ready:
function_default();

...

function function_default() {
    $('.widget_content_1').empty().append("default content here");
}

任何人都知道如何解决此问题？

Answer 1

您可以使用jQuery :last选择器来选择最后一个（希望是新添加的）小部件，如下所示：

function function_default() {
    $('.widget_content_1:last').empty().append("default content here");
}

如果有一个小部件，那么这将选择第一个小部件。

Answer 2

使用位置特定选择器是一种解决方案，但如果最新的小部件并不总是处于特定位置，则也容易出错。

我只需在新创建的小部件中添加一个标记new，无论它在何处创建：

<div class="widget widget_1 new">
    ...
</div>

然后在jQuery中使用这个选择器：

function function_default() {
    $('.widget.new').empty().append("default content here").removeClass('new');
}

如果已创建了n个新窗口小部件，这也会将默认内容添加到所有窗口小部件中。

Answer 3

如果附加了新创建的，可以使用:last选择器或.last( )功能吗？

E.g：

$('.widget_content_1').last( ).empty( ).append('Default content')

停止影响现有的HTML

3 个答案: