jQuery的同步DOM元素值

Question

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

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

我在页面上的其他地方还有许多其他元素需要与“主值”同步。

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

更改“主值”的值时，我希望所有同步的元素都随之更新。

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

应该影响：

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

我不希望每次更改“主值”时都必须搜索所有元素，以便找到已同步的元素以进行更改。 我认为当需要搜索许多元素时，这相当慢。

子值应预先绑定到主值，以便快速进行选择。

$('.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/

只是第一次尝试。 如果（例如）母版不止一个元素，则存在改进的空间。 应该有一个对所有要同步的元素的全局引用，并提供一个选项来告知是否也要同步主服务器 。

$.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

好的，我们开始：

这是Microsoft的官方数据链接插件。 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/