5

例えば：

  $('.input-xlarge').keyup(function(element) {
              element.parent().parent().removeClass("error success");
          });

シナリオ：

クラス .input-xlarge の下に多くの入力フィールドがあり、フォームが送信された後の成功状態に応じて、緑または赤に色付けされます。(非 ajax 形式)

フィールドの状態がサーバーから返されると、有効な入力で次の送信が開始されるまで、フィールドが赤く点灯し続けます。

必要なもの：

したがって、ユーザーがフォームを送信した後、いくつかのフィールドを受け取りました-一部は有効で、一部は無効な状態です。ユーザーが入力を開始するたびに、フィールドをニュートラルな装飾にしたいと考えています。

機能しないもの:

私が提供したコードから、次のことを期待しています。

  1. ユーザーが入力を開始するたびに、クラス .input-xlarge を持つ任意の入力フィールドのイベントをトリガーします。
  2. css 装飾をニュートラルホワイトに変更する (css クラスを削除する) 必要がある入力フィールドを正確に示します。

残念ながら、.keyup イベントをトリガーした実際の入力要素を抽出できないようです。これを行うことは可能ですか？

ご覧のとおり、後でcss要素への正確なナビゲーションを知っていますが、ルートオブジェクトはエラーで終了します:

Uncaught TypeError: Object #<Object> has no method 'parent'

ここに画像の説明を入力

4

3 に答える 3

11

関数内では、関数thisをトリガーした要素を取得するために使用できます。これを使って：

$('.input-xlarge').keyup(function() {
    $(this).parent().parent().removeClass("error success");
});

関数の最初のパラメーターはイベントです。もう 1 つの方法は、イベント オブジェクトで currentTarget を使用することです (これは と同じですthis)。

$('.input-xlarge').keyup(function(e) {
    $(e.currentTarget).parent().parent().removeClass("error success");
});

また、使用することを恐れないでくださいconsole.log()。ケースで使用すると、それelementがイベントであることがわかります。

于 2013-09-03T02:47:31.893 に答える
3

イベント ハンドラー内で使用thisして、ハンドラーが登録された要素 (この場合は入力要素) を参照できます。

イベント ハンドラーの最初のパラメーターはeventオブジェクトです。イベント オブジェクトでは、イベントevent.targetをトリガーした実際の要素をターゲットにevent.currentTagetし、ハンドラーが登録された要素を参照するために使用できます。

$('.input-xlarge').keyup(function(event) {
    $(this).parent().parent().removeClass("error success");
});

これについてもっと読む

于 2013-09-03T02:45:44.650 に答える
2

または、クラス ($('#form').change など) として特定のセレクターを使用しない場合は、次のようにイベントをコールバック関数に渡すことができます。

    $('#SomeForm').change(function (event) {        
            if (event.target.id === "SomeElementId") {
            // do whatever you need. 
            }
     });
于 2014-03-07T16:37:14.157 に答える