0

IDが「rec-0」、「rec-1」、「rec-n」の要素を含むページがあり、それらにイベントを添付する方法を見つけようとしています。これらは、td要素の子である入力要素です。

<td><input type="checkbox" id="rec-0" /></td>

これを使用して、すべての要素にイベントハンドラーをアタッチしようとしました。

$("td > input").change({ elem:this }, recipe_checkbox_clicked);

しかし、recipe_checkbox_clicked()関数内で私は得Uncaught TypeError: Object #<Object> has no method 'prop'ます。これは、recipe_checkbox_clicked関数です。

function recipe_checkbox_clicked(elem) { 
    if (elem.prop('checked')) $("#modify-recipe").show(); 
    else $("#modify-recipe").hide(); 
}

関数のコードを無名関数にコピーすると、わずかな変更を加えるだけで、期待どおりに機能します。変更されたコードは次のとおりです。

$("td > input").change( function() { 
    if ($(this).prop('checked')) $("#modify-recipe").show(); 
    else $("#modify-recipe").hide(); 
});

そのままにしておくこともできますが、無名関数は使いたくないです。それらを使用せずに私が試みていることを達成する方法はありますか？

アディルとフェリックスの助けと提案で、私は次のコードで私が望む振る舞いを得ました！

function recipe_checkbox_clicked() { 
    if ($(this).prop('checked')) $("#modify-recipe").show(); 

    var any_checked = false; 
    $("td > input").each(function() { 
        if($(this).prop('checked')) {
            any_checked = true; 
            return false; 
        }
    }); 
    if (!any_checked) $("#modify-recipe").hide(); 
}

そして、この関数をアタッチするセレクター：

$("td > input").change(recipe_checkbox_clicked);

どうもありがとう！私はこれを行う方法を理解しようとして何時間も燃やしました。

4

2 に答える 2

3

名前付き関数で同じコードを使用するだけです。

function recipe_checkbox_clicked() { 
    if ($(this).prop('checked')) $("#modify-recipe").show(); 
    //  ^^^^^^^
    // or better: if (this.checked) ...
    else $("#modify-recipe").hide(); 
}

あなたのコードが間違っていると私が信じている2つのこと：

$("td > input").change({ elem:this }, recipe_checkbox_clicked);

elem正しくアクセスできたとしても、thisここでは、によって選択された要素を実際に参照しているのではなく、他の要素を参照している$("td > input")ため、$(elem).prop(...)おそらく期待どおりに機能しないと思います。

function recipe_checkbox_clicked(elem) {

イベントハンドラに渡される最初の引数は、常にイベントオブジェクトです。イベントデータにアクセスする場合は、イベントオブジェクトを介してこれを行う必要があります。

function recipe_checkbox_clicked(event) {
  var elem = event.data.elem;
}

http://api.jquery.com/event.data/

于 2012-11-13T06:58:43.807 に答える
1

匿名関数を渡す代わりに、変更時に関数の名前を渡すことができます。関数内のjqueryの場合は$（this）から、javascriptの場合はthisからイベントのソースにアクセスできます。

変化する 

$("td > input").change( function() { 
    if (elem.prop('checked')) $("#modify-recipe").show(); 
    else $("#modify-recipe").hide(); 
});

に

$("td > input").change(yourFunction); 

function yourFunction() { 
    elem = $(this);
    if (elem.prop('checked')) $("#modify-recipe").show(); 
    else $("#modify-recipe").hide(); 
}

rec-0、rec-1、rec-2などのIDでバインドするには、ワイルドカードを使用できます

 $("[id^=rec-").change(yourFunction);
于 2012-11-13T06:52:46.593 に答える