web-dev-qa-db-ja.com

複数の要素に対する1つのjQuery変更イベント

3つのテキストボックスがあり、すべて同じIDで、コントローラー配列に取り込むことでASP

最初の3つの下に無制限の数のテキストボックスを追加するリンクがあります。

私の現在の変更ステートメント：

    $('input.#invent').change(function () {

最初のテキストボックスの変更イベントでは正常に機能しますが、同じ情報を持つ他のユーザーは変更時にイベントを起動しません

3つ以上のテキストボックスのいずれかが変更されたときに変更イベントを発生させるための最良の戦略は何ですか？

jqueryhtmlasp-classic
11
user2182715

代わりに、#invent IDを持つ3つの要素すべてをクラスに変更します（ID一意である必要があります）、またはあなたのケースで現在起こっていることのように、それは最初の要素に対してのみ機能します。

次に、.inventクラスを持つすべての要素をターゲットにできます。

$('input.invent').change(function () {
   // Here, $(this) refers to the specific element of the .invent class which 'changed'
}):

IDセレクターとクラスセレクターの違いについてもっと読む ここ 。

8
dsgriffin

最良の戦略（95％の確率）：クラスを使用して複数の要素のリスナーを追加します。 IDは一意であることが期待されます。クラスはこのために作成されており、将来的に最も拡張性が高くなります。

HTML：

<input type="text" name="input1" class="invent" />
<input type="text" name="input2" class="invent" />

jQuery：

$('.invent').change(function () {
   // Do magical things
});

他の5％の場合：

選択した回答で説明されている単一のクラスではなく、一意のIDまたは一意のフィールド名を使用する場合は、canこのように複数の一意の名前の要素のリスナーを追加します。 ：

HTML：

<input type="text" name="something1" id="invent1" />
<input type="text" name="something2" id="invent2" />
<input type="text" name="something3" id="invent3" />

jQueryを使用できます複数のセレクター：

$('#invent1, #invent2, #invent3').change(function () {
   // Do magical things
});

[〜＃〜]または[〜＃〜]jQueryを使用できますで始まる属性セレクター：

//target based on what input id starts with
$('[id^="invent"]').change(function () {
   // Do magical things
});

// OR target based on input name attribute starts with
$('input[name^="something"]').change(function () {
   // Do magical things
});
6
webaholik

Idは一意であるため、代わりにクラスを使用する必要があります。次に、それぞれを使用してクラスを反復処理し、$(this)を適用して現在のchange入力をターゲットにすることができます。

$('input.invent').each(function () {
    $(this).change(function () {

    });
});
5
Eli

HTMLが次のようになっているとしましょう。

<input type="text" id="invent" />
<input type="text" id="invent" />
<input type="text" id="invent" />
<input type="text" id="invent1" />
<input type="text" id="invent2" />
<input type="text" id="invent3" />

ここで、IDは一意である必要があります。したがって、inventのようなすべての入力にクラスを配置すると、HTMLは次のようになります。

<input type="text" class="invent" />
<input type="text" class="invent" />
<input type="text" class="invent" />
<input type="text" class="invent" />
<input type="text" class="invent" />
<input type="text" class="invent" />

そして、次のような変更時イベントを呼び出します。

// This would be called now for all the text-boxes
$('input.invent').change(function () {
   // Your code here
}):

場合によっては、すべてのテキストボックスにクラスを追加することはできません。あなたは単にこれを行うことができます：

$("input:text").change(function () {
   // Your code here
}):
3
palaѕн

@Eliはあなたにぴったりの答えを返します。すべてのテキストボックスを読みたい場合は、次の方法を使用できます。

  $('input[type=text]').each(function () {
                    $(this).change(function () {
                        alert($(this).val());
                        $(this).focus();
                    });
                });
2
sarathkumar

IDを使用して複数の要素を参照することはできません。 IDは、HTMLページで一意である必要があります。

代わりにクラスを使用してください:-)。

0
Alytrem