单击bootstrap`row` class div中的item div更改类

问题描述 投票:0回答:1

此代码用于在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 html
1个回答
1
投票

下面的jquery在任何具有类 <...>的元素上进行单击,向上移动DOM树到最近的.col-sm-4,然后切换任何直接子节点的类。

这故意不会传遍孙子孙女以避免问题。

希望这是你想要的。

.row

Alternative

更好......你可以使用.toggleClass来切换这两个类,并在你创建新行的情况下动态添加触发事件。

$(".col-sm-4").click( function() {

  $(this).closest(".row").children(".col-sm-4").removeClass("col-sm-4").addClass("col-sm-1");

});

Demo

$(".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;
}
© www.soinside.com 2019 - 2024. All rights reserved.