Question

我正在尝试仅定位与复选框关联的div。现在我正在使用的脚本只更改第一个div的类，其ID为taskList，而不是复选框所在的类。

$('input:checkbox').change(function () {
    if ($(this).is(":checked")) {
        $('#taskList').addClass("complete");
    } else {
        $('#taskList').removeClass("complete");
    }
});

Answer 1

id每个元素都应该是唯一的。使用类taskList代替如下。

$('input:checkbox').change(function () {
    if ($(this).is(":checked")) {
        $(this).closest('.taskList').addClass("complete");
    } else {
        $(this).closest('.taskList').removeClass("complete");
    }
});

.complete {
    border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="taskList">
    <input type="checkbox"/>
</div>
<div class="taskList">
    <input type="checkbox" />
</div>

Answer 2

你们应该closest来这里。

假设你有这样的html： -

<div class="taskList">
    <input type="checkbox"/>
</div>
<div class="taskList">
    <input type="checkbox" />
</div

现在colsest会做什么，它适用于集合中的每个元素，get 通过测试元素匹配选择器的第一个元素本身。

所以检查（更改）你应该这样做，

$(this).closest('.taskList').addClass("yourClass");

完整代码，

$('input:checkbox').change(function () {
    if ($(this).is(":checked")) {
        $(this).closest('.taskList').addClass("yourClass");
    } else {
        $(this).closest('.taskList').removeClass("yourClass");
    }
});

希望它有所帮助！

如何使用复选框上的addClass仅定位div中的ID

2 个答案: