Question

假设我们在复选框后面有2个复选框和2个div：

<div class="wrapper">
    <input type="checkbox" name="checkbox1" checked="" />
</div>
<div class="border"></div>

<div class="wrapper">
    <input type="checkbox" name="checkbox2" checked="" />
</div>
<div class="border"></div>

我的目标是切换适当的＆＃34;边界＆＃34;的颜色。 div，位于复选框下方。问题是，我不知道如何获得适当的div。我试过这个，但它没有用：

$('input[type="checkbox"]').change(
    function  ()
    {
        var div = $(this).find('div');//<-- ?

        if ($(this).checked)
        {
            div.css("border", "solid 2px blue");
        }
        else
        {
            div.css("border", "solid 2px black");
        }
    });

jsfiddle

Answer 1

问题是.find()方法将选择任何后代元素。

由于input元素是自我关闭的，并且不包含任何后代元素，因此$(this).find('div')未选择任何内容。

您可以选择父div元素，然后选择紧随其后的元素：

$(this).parent().next();

以上将选择直接的父元素。使用.closest()方法可能更安全，以便选择祖先.wrapper元素（以防嵌套变化）：

$(this).closest('.wrapper').next();

此外，jQuery对象没有checked属性，您应该检索DOM元素的checked属性，因此$(this).checked应为this.checked或者您可以使用.prop()方法通过使用：checked从jQuery对象中的DOM元素检索$(this).prop('checked')属性。

Updated Example

$('input[type="checkbox"]').on('change', function() {
  var div = $(this).closest('.wrapper').next();

  if (this.checked) {
    div.css("border", "solid 2px blue");
  } else {
    div.css("border", "solid 2px black");
  }
});

作为旁注，我建议只需在相应的元素上切换一个类：

Updated Example

.border.blue-border {
  border-color: blue;
}

$('input[type="checkbox"]').on('change', function() {
  $(this).closest('.wrapper').next().toggleClass('blue-border')
});

Answer 2

将其更改为var div = $(this).parent().next('.border');

Answer 3

您需要按照某些答案中提到的parent().next() ...

此外，未正确评估复选框状态。

试试这个解决方案：

$('input[type="checkbox"]').change(
    function  () {
        var div = $(this).parent().next();

        if ($(this).is(":checked")) {
            div.css("border", "solid 2px blue");
        } else {
            div.css("border", "solid 2px black");
        }
    }
);

https://jsfiddle.net/gv3pqo2z/3/

JQuery：如何找到当前元素之后的元素

3 个答案: