如您在 HTML 中所见,复选框隐藏在我想要影响的类中的 5 层。
$(".icheckbox").click(function() {
if ($(this).is(":checked")) {
$(this).closest(".gallery-item").addClass("active");
} else {
}
});
a.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="gallery-item" href="#">
<div class="image">
<ul class="gallery-item-controls">
<li>
<label class="check">
<input type="checkbox" class="icheckbox">
</label>
</li>
</ul>
</div>
</a>
我想要的是在选中复选框时将 .active
类添加到 gallery-item
类,并在关闭(未选中)时将其删除。但是我找不到我使用 Jquery 的方法,更糟糕的是,我无法根据检查的 attr 来控制它,因为检查时不会添加检查的 attr。很奇怪。
这是一个CODEPEN .如果你做对了,灰色区域应该变成红色并与复选框关联
谢谢大家
最佳答案
你需要删除else上的类
$(document).ready(function(){
$(".icheckbox").click(function() {
if ($(this).is(":checked")) {
$(this).closest(".gallery-item").addClass("active");
} else {
$(this).closest(".gallery-item").removeClass("active");
}
});
});
http://jsbin.com/zikomagike/edit?html,css,js,console,output
如果你想观察变化,使用.change()
。即使某些其他函数更改了此类而不是输入,这也会被触发。
最好添加一个名称属性并在代码中使用它:$( "input[name='chkbox']")
HTML
<a class="gallery-item" href="#">
<div class="image">
<ul class="gallery-item-controls">
<li>
<label class="check">
<input name="chkbox" type="checkbox" class="icheckbox">
</label>
</li>
</ul>
</div>
</a>
JS:
$(document).ready(function(){
$( "input[name='chkbox']" ).change(function() {
if ($(this).is(":checked")) {
$(this).closest(".gallery-item").addClass("active");
} else {
$(this).closest(".gallery-item").removeClass("active");
}
});
});
关于jquery - 选中复选框时从复选框控制父级 5 级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40540204/