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

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

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

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

4

2 回答 2

3

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

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/

于 2012-11-13T06:58:43.807 回答
1

您可以在更改中传递函数的名称，而不是传递匿名函数，您可以从 $(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);
于 2012-11-13T06:52:46.593 回答