2

这是我想要实现的工作演示。只需在输入中输入一些值，您可能会得到我想要实现的目标。（是的，我得到了它的工作，但坚持下去..）
但是当多个键一起按下时它会失败。

我正在尝试：
我的屏幕包含很少启用和禁用的输入元素。每当用户更新可编辑输入元素中的任何值时，我都想更新与用户更新值具有相同值的禁用输入。

HTML： 

<input value="foo" />   // When User updates this
<br/>
<input value="bar">
<br/>
<input value="Hello">
<br/>
<input value="World">
<br/>
<input value="foo" disabled>  // this should be updated
<br/>
<input value="bar" disabled>
<br/>
<input value="foo" disabled>  // and this also
<br/>
<input value="bar" disabled>
<br/>
<input value="Happy Ending!">
<br/>

我尝试了这个，我认为这将使我免于 multiple_clicks_at_a_time
JS： 

$(":input:not(:disabled)").keyup(function () {
    // Get user entered value
    var val = this.value;

    // Find associated inputs which should be updated with new value
    siblings = $(this).data("siblings");
    $(siblings).each(function () {
         // Update each input with new value 
         this.value = val;
    });
});

$(function () {
    $(":input:not(:disabled)").each(function () {
        // Find inputs which should be updated with this change in this input
        siblings = $(":input:disabled[value=" + this.value + "]");

        //  add them to data attribute   
        $(this).data("siblings", siblings);
    });
});

但是我无法将选择器传递给keyup函数并对其进行调用.each。

PS：

我之前完全不同的尝试，使用 single_click_at_a_time 但我觉得我一次又一次不必要地遍历 DOM 所以放弃了这个 

$(":input").keypress(function () {
    $(this).data("oldVal", this.value);
});

$(":input").keyup(function () {
    var oldVal = $(this).data("oldVal");
    $(this).data("newVal", this.value);
    var newVal = $(this).data("newVal");

    $("input:disabled").each(function () {
        if (this.value == oldVal) this.value = newVal;
    });
});
4

2 回答 2

2

我将首先对这些输入进行分组，并为启用的元素绑定一个处理程序以应用于该组。见下文，

var grpInp = {};

$(":input").each(function () {
    if (grpInp.hasOwnProperty(this.value)) {
        grpInp[this.value] = grpInp[this.value].add($(this));
    } else {
        grpInp[this.value] = $(this); 
    }
});

$.each(grpInp, function (i, el) {    
    el.filter(':enabled').keyup(function () {
        el.val(this.value);
    });
});

演示：http: //jsfiddle.net/fjtFA/9/

上述方法基本上是对具有相同值的输入元素进行分组，然后根据它们进行过滤:enabled并绑定一个处理程序以将其应用于组。

于 2013-03-04T18:54:37.137 回答
1 
// Find associated inputs which should be updated with new value
siblings = $(this).data("siblings", siblings);

否。使用两个参数调用的.data方法不会获取，而是设置数据（并返回当前选择）。此外，您应该将变量设为本地：

var siblings = $(this).data("siblings");

工作演示

于 2013-03-04T18:51:41.080 回答