Question

好吧我知道.closest（）之前已经讨论过了，但是我一直在搜索，但我仍然无法让它工作。

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

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

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

现在复选框的名称包括check1，check2和check3。产生了多少。

我尝试使用不同的this（），parent（）和nearest（）函数来尝试选择其中一个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

closest()，parent()，只有复选框位于div内，所有变体才有效。

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

说到这一点，你应该避免大量添加事件处理程序。最好使用delegate

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

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

Answer 2

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

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

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

jsfiddle上的代码示例。

Answer 3

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

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

jQuery最接近的功能

3 个答案: