此代码用于在div上定义bootstrap qazxsw poi类:
row
使用jQuery,当点击带有<div class="row">
<br />
<div class="col-sm-4 rowitem" id="Snacks">
<a href="#">
<img src="~/XImages/snacks.png" />
</a>
</div>
<div class="col-sm-4 rowitem">
<img src="~/XImages/baby.jpg" />
</div>
<div class="col-sm-4 rowitem">
<img src="~/XImages/personal-care.jpg" />
</div>
<div class="col-sm-4 rowitem">
<img src="~/XImages/beverages.jpg" />
</div>
</div>
类的div时,我需要将类col-sm-4
的所有项目div更改为col-sm-1
。
有人可以指导。提前致谢。
下面的jquery在任何具有类 <...>的元素上进行单击,向上移动DOM树到最近的.col-sm-4
,然后切换任何直接子节点的类。
这故意不会传遍孙子孙女以避免问题。
希望这是你想要的。
.row
更好......你可以使用.toggleClass来切换这两个类,并在你创建新行的情况下动态添加触发事件。
$(".col-sm-4").click( function() {
$(this).closest(".row").children(".col-sm-4").removeClass("col-sm-4").addClass("col-sm-1");
});
$(".row").on("click", ".rowitem", function() {
$(this).closest(".row").children(".rowitem").toggleClass("col-sm-4").toggleClass("col-sm-1");
});
$(document).on("click", ".rowitem", function() {
$(this).closest(".row").children(".rowitem").toggleClass("col-sm-4").toggleClass("col-sm-1");
});
.col-sm-4 {
background: white;
}
.col-sm-1 {
background: blue;
}