在 jQuery 中使用循环的选择器问题

Posted 2023-05-09

【中文标题】在 jQuery 中使用循环的选择器问题

【英文标题】：Selector issue using a loop in jQuery

【发布时间】：2021-02-13 17:13:39

【问题描述】：

在我的 jQuery 代码（见下文）中，我无法更改“typetravaux”类内容的颜色。 悬停时的不透明度变化正常，但颜色变化不起作用（我尝试了 2 种不同的方法，但都不起作用）。

你们能告诉我我做错了什么吗？谢谢！

CSS：

.typetravaux 
  width: 100%;
  color: #ffffff;

HTML：

<div class="solutions">
    <div class="bloc1">
      <span class="typetravaux">PLOMBERIE</span>
       <div class="picture"><img src="img/plomberie.png" class="prestapicture"></div>
     </div>
    <div class="bloc2">
      <span class="typetravaux">CHAUFFAGE</span>
       <div class="picture"><img src="img/chauffage.jpg" class="prestapicture"></div>
     </div>
    <div class="bloc3">
      <span class="typetravaux">CLIMATISATION</span>
       <div class="picture"><img src="img/climatisation.jpg" class="prestapicture"></div>
     </div>
</div>

jQuery :

$prestapicture = $('.prestapicture');

for (y=0; y < $prestapicture.length; y++) 
    $prestapicture.eq(y).on("mouseover", function() 
      $(this).css("opacity", "0.3");
      $(this).prev(".typetravaux").css("color","black") // **does not work**
    
    )
    
    $prestapicture.eq(y).on("mouseout", function() 
      $(this).css("opacity", "1");
      $(".typetravaux").eq(y).css("color","white"); //**does not work either**
    
    )

【参考方案1】：

prev 使用之前的 sibling，但 .typetravaux 元素不是 .prestapicture 元素的兄弟姐妹，它们是这些元素的父元素 .picture 元素的兄弟姐妹。

您可以这样解决：

$(this).parent().prev(".typetravaux").css("color","black");
//      ^^^^^^^^^

...但它非常脆弱，对 html 的微小更改会破坏它。

相反，我会：

向容器 div 中添加一个类并执行以下操作：

$(this).closest(".container").find(".typetravaux").css("color","black");

或

当您需要这种不同的样式时，向该容器添加一个类，并在 CSS 中使用后代组合符（空格）来进行 CSS 更改。

.pic-hovered .typetravaux 
    color: black;

---

一般来说，我会避免使用css() 进行样式设置。使用类，并将样式规则放入您的 CSS。