在jQuery中对父节点的所有子节点重复执行某些操作

42fyovps 于 2023-02-12 发布在 jQuery

关注(0)|答案(2)|浏览(108)

我有以下代码：

(function($) {

  $(".tmb:first-child").on('mouseenter', function() {
    $(".style-light-bg").css("background-color", "rgb(208,206,202)");
    $(".tmb:nth-child(2)").addClass("filtered");
  });
  $(".tmb:first-child").on('mouseleave', function() {
    $(".style-light-bg").css("background-color", "#e6e5e2");
    $(".tmb:nth-child(2)").removeClass("filtered");
  });

  $(".tmb:nth-child(2)").on('mouseenter', function() {
    $(".style-light-bg").css("background-color", "rgb(177,180,174)");
    $(".tmb:first-child").addClass("filtered");
  });
  $(".tmb:nth-child(2)").on('mouseleave', function() {
    $(".style-light-bg").css("background-color", "#e6e5e2");
    $(".tmb:first-child").removeClass("filtered");
  });

})(jQuery);

.style-light-bg {
  background-color: #e6e5e2;
  transition: background-color .4s ease-out;
}

.tmb {
  opacity: 1;
  transition: all .4s ease-in;
}

.filtered {
  filter: grayscale(1);
  opacity: .2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="style-light-bg">
  <div class="isotope-container">
    <div class="tmb"><img src="my-image-1"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-2"></div>
    ...
  </div>
</div>

我在这里所做的是当你悬停第一个. tmb div时，第二个将失去不透明度和灰度。容器div的背景（style-light-bg）将改变。当悬停第二个. tmb div时，同样的事情将发生在第一个. tmb div上。这是完美的工作，也正是我试图实现的。
现在，当我将鼠标悬停在第一个. tmb div上时，我希望所有其他. tmb div（动态的div数量，因为它们可以添加或消失）将具有类. filtered。同时，背景应将. style-light-bg更改为5种不同的颜色。例如. tmb 1，. tmb 6，. tmb 11，...将背景颜色更改为红色。. tmb 2，. tmb 7，. tmb 12，...会把背景色改成蓝色，等等...

jquery

来源：https://stackoverflow.com/questions/75391497/do-something-in-jquery-repeatedly-on-all-children-of-a-parent

2条答案

按热度按时间

2j4z5cfb1#

使用事件委托处理动态添加和删除的div。
使用$(this)访问事件的当前目标。
使用$(this).index()来获得它在列表中的位置。然后，你可以使用除以5的余数来获得每5个项目循环的数字。然后，使用它来引用容器具有不同背景颜色的5个类中的一个。

(function($) {
  $(".isotope-container").on("mouseenter", ".tmb", function() {
    $(this).siblings().addClass("filtered");
    $(".style-light-bg").removeClass("container0 container1 container2 container3 container4")
      .addClass("container" + ($(this).index() % 5));
  });
  $(".isotope-container").on("mouseleave", ".tmb", function() {
    $(this).siblings().removeClass("filtered");
    $(".style-light-bg").removeClass("container0 container1 container2 container3 container4");
  });
})(jQuery);

.style-light-bg {
  background-color: #e6e5e2;
  transition: background-color .4s ease-out;
}

.tmb {
  opacity: 1;
  transition: all .4s ease-in;
}

.filtered {
  filter: grayscale(1);
  opacity: .2;
}

.container0 {
  background-color: red;
}

.container1 {
  background-color: orange;
}

.container2 {
  background-color: yellow;
}

.container3 {
  background-color: green;
}

.container4 {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="style-light-bg">
  <div class="isotope-container">
    <div class="tmb"><img src="my-image-1"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-1"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-1"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-2"></div>
  </div>
</div>

赞(0）回复(0）举报 2023-02-12

4c8rllxm2#

@Barmar已经做得很好了，但是遵循jQuery的哲学："写得更少-做得更多"-可以用更少的代码完成：

const col="red,orange,yellow,green,turquoise,blue".split(",");
  $(".isotope-container").on("mouseenter mouseleave", ".tmb", function(ev,e) {
    $(this).siblings().toggleClass("filtered",e=ev.type=="mouseenter");
    $(".style-light-bg").css("background-color",e?col[$(this).index()%col.length]:"")
  });

.style-light-bg {
  background-color: #e6e5e2;
  transition: background-color .4s ease-out;
}

.tmb {
  opacity: 1;
  transition: all .4s ease-in;
}

.filtered {
  filter: grayscale(1);
  opacity: .2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="style-light-bg">
  <div class="isotope-container">
    <div class="tmb"><img src="my-image-1"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-1"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-1"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-2"></div>
    <div class="tmb"><img src="my-image-2"></div>
  </div>
</div>

赞(0）回复(0）举报 2023-02-12

我来回答

在jQuery中对父节点的所有子节点重复执行某些操作

2条答案

相关问题

热门标签

最新问答