jQuery最接近函数

Question

好吧，我知道 .closest() 之前已经讨论过，但我一直在搜索，但仍然无法正常工作。

情况是这样的。我有一张带有一些复选框和标签的表格。现在，当检查复选框时，我希望div出现，并在未选中时消失。请记住，这是动态 PHP 代码。

到目前为止，我已经让它工作了，但当前的问题是所有消息 div 都出现了，而不仅仅是适当的。

$('[name^="check"]').click(function() {
    $(".message").toggle(this.checked);
});

现在复选框的名称为 check1、check2 和 check3。产生多少的问题。

我尝试使用不同的 this()、parent() 和最接近的函数来尝试只选择其中一个 div，但我无法让它工作。

感谢您的关注。

编辑：

呈现的 HTML 看起来有点像这样（简化）

<div style="float: left;">
<input type="checkbox" id="check1" name="check1" value="1"><label for="check1">Label for check1</label></div>
<div class="message" style="display: none; ">FOO</div>

<div style="float: left;">
<input type="checkbox" id="check2" name="check2" value="2"><label for="check2">Label for check2</label></div>
<div class="message" style="display: none; ">FOO</div>

Answer 1

使用您提供的标记，这应该适合您。

$('[name^="check"]').click(function() {
    $(this).parent().next(".message").toggle(this.checked);
});

侧节点：您可以通过使用input[name^="check"] 来提高选择器的性能，因此 jQuery 不需要遍历 所有 元素。

jsfiddle 上的代码示例。

Answer 2

closest()、parent() 和所有变体只有在复选框位于 div 内时才有效。

$('[name^="check"]').click(function() {
    $(this).parent().next(".message").toggle(this.checked);
});

话虽如此，您应该避免大量添加事件处理程序。最好使用delegate

$('#table_id').delegate('[name^="check"]', function() { ... });

此方法仅添加 一个 事件侦听器，而不是为每个复选框添加。

Answer 3

$('[name^="check"]').click(function() {
    $(this).parent().children("div.message").toggle(this.checked);
});

假设您的 div 和您的复选框具有相同的父级。