我正在尝试编写一个脚本,如果父元素有一个 chlid,则添加 onlick 类,这就是我到目前为止所得到的。任何帮助将不胜感激,附:我知道很多代码都很糟糕:父元素是“.pinGrid”,子元素是“#pin”,onclick 是“#like”
注意:我正在尝试将类添加到子元素中。引脚框位于每个循环上。
JS:
$(document).ready(function(){
$("#like").click(function () {
$('.pinGrid').has( "#pin" ).toggleClass("pincard-checked");
});
});
HTML:
<div class="pinGridWrapper">
<div class="pinGrid">
<div class="pin" id="pin1">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd" name="c1" id="like">
<label></label>
</div>
<p class="pull-left"> </p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title"><a href="" class="">Click</a></p>
</div>
</div>
</div>
</div>
最佳答案
您可以只使用ID选择器来获取子元素,然后使用toggleClass()和选中状态
$(document).ready(function() {
$(".like").change(function() {
$(this).closest('.pin').toggleClass("pincard-checked", this.checked);
});
});
.pincard-checked {
background-color: lightgrey;
}
.pin {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pinGridWrapper">
<div class="pinGrid">
<div class="pin">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd like" name="c1">
<label></label>
</div>
<p class="pull-left"></p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title"><a href="" class="">Click</a>
</p>
</div>
</div>
<div class="pin">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd like" name="c1">
<label></label>
</div>
<p class="pull-left"></p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title"><a href="" class="">Click</a>
</p>
</div>
</div>
<div class="pin">
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd like" name="c1">
<label></label>
</div>
<p class="pull-left"></p>
<!-- date -->
<h2> Title </h2>
<!-- title-->
<p><b>INFO:</b>
<br>
</p>
<div class="text-center">
<p class="card-title"><a href="" class="">Click</a>
</p>
</div>
</div>
</div>
</div>
关于javascript - 如果父元素有子元素则添加 onclick 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35333507/