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);

いいえ。2 つの引数を指定して呼び出された.dataメソッドは、データを取得するのではなく、データを設定します (そして、現在の選択を返します)。また、変数をローカルにする必要があります。

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

ワーキングデモ

于 2013-03-04T18:51:41.080 に答える