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

如何解决在jQuery中使用循环的选择器问题

在我的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","1");
      $(".typetravaux").eq(y).css("color","white"); //**does not work either**
    
    })
}

解决方法

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

您可以修复此问题：

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

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

相反，我会：

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

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

   或

2. 在需要这种不同样式的情况下，向该容器添加一个类，并使用CSS中的后代组合器（空格）进行CSS更改。

   .pic-hovered .typetravaux {
       color: black;
   }
   

---

通常，我会避免使用css()进行样式设置。使用类，然后将样式规则放入CSS。