Question

我有一个像这样的DOM元素：

<div id='master-value'>Apples</div>

我在页面的其他地方有许多其他元素需要与'master-value'同步。

<div class='fruit-value' data-reference='master-value'>Apples</div>
<div class='some-fruit' data-reference='master-value'>Apples</div>

当我更改'master-value'的值时，我希望所有已同步的元素都随之更新。

$('#master-value').text('Pears');

应该影响：

<div class='fruit-value' data-reference='master-value'>Pears</div>
<div class='some-fruit' data-reference='master-value'>Pears</div>

我不想要的是，在'master-value'的每次更改中都必须搜索所有元素以便找到已同步的元素以便更改它们。当有许多元素需要搜索时，我认为这很慢。

应该有一些方法可以将子值预先绑定到主值，以便快速选择。

$('.fruit-value, .some-fruit').sync('#master-value');

我有一些想法，例如：我可以创建一个预先选择的同步对象数组，在主值上绑定自定义事件，并在每次更改值时运行该事件。该事件将通过数组来更新所有子元素。

我确信有更好的方法可以做到这一点......

谢谢！

Answer 1

您可以将选择器存储一次，如下所示：

var elements = $('.fruit-value, .some-fruit'); //do this once

elements.text($("#master-value").text()); //when you want to sync

elements变量/ jQuery对象将保留对DOM元素的引用数组，因此每次都不会遍历它们。

Answer 2

给他们所有同一个班级会不会更容易？

所以你要做好

$('.fruit').text('Pears')

Answer 3

如果您正在寻找插件类型的功能，请尝试以下方法：

设置时，需要一个具有一个属性syncWith的对象来设置应与之同步的元素。

设置文本时，它将设置主文本和同步元素的文本。

试一试： http://jsfiddle.net/GH33J/

只是第一次尝试。如果（例如）主人不止一个元素，那么还有改进的余地。应该有一个全局引用所有要同步的元素，以及一个判断 masters 是否应该同步的选项。

$.fn.sync = function(arg) {
       // if arg plain object, we are doing an initial setup
    if ($.isPlainObject(arg)) {
        return this.each(function() {
            $.data(this, 'syncWith', $(arg.syncWith));
        });
        // if arg is jQuery object, we are adding new items
    } else if (arg.jquery) {
        return this.each(function() {
            var $set = $.data(this, 'syncWith');
            $.each(arg, function() {
                $set.push(this);
            });
        });
        console.log(this.data('syncWith'));
        // otherwise assume we have a string, and are syncing a new value
    } else {
        return this.each(function() {
            $(this).text(arg);
            $.data(this, 'syncWith').text(arg);
        });
    }
};


// Set up the sync
$('#master-value').sync({
    syncWith: '.fruit-value,.some-fruit'
});

var $new = $('<div class="fruit-value">Apples</div>').appendTo('body');
// Pass a jQuery object containing newly created element(s) to add to the set
$('#master-value').sync($new);

// Activate a sync
$('#master-value').sync("pears");

Answer 4

好的，我们走了：

这是连接微软插件的官方数据。它现在得到了jQuery Core团队的支持，所以我们知道它很好。：）

http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx

http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/

jquery同步dom元素值

4 个答案: