如何使用 eventData 和命名函数附加事件处理程序？

Question

我有一个页面，其中包含 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(); 
}); 

我可以保持原样，但我不喜欢使用匿名函数。有没有办法在不使用它们的情况下完成我正在尝试的事情？

---

在 Adil 和 Felix 的帮助和建议下，我通过以下代码得到了我想要的行为！

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

非常感谢！我花了好几个小时试图弄清楚如何做到这一点。

Answer 1

只需在命名函数中使用相同的代码：

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

---

我认为您的代码有两点错误：

$("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/

Answer 2

您可以在更改中传递函数的名称，而不是传递匿名函数，您可以在函数中从 $(this) 访问 jquery 和 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);