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的事件源，并在函数中访问javascript。

更改

$("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);

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

2 个答案: