選擇大孩子元素

Question

我正在努力在列表中選擇我的img元素，因此我可以打開和關閉其類。 我嘗試了不同的方法來選擇它，但是即使將鼠標懸停在列表的第二/第三/ ... div上，它的列表中的第一張圖片也會亮起。

<ul>
  <li>
    <div class="container" onmouseover="toggleImgColor()" onmouseout="toggleImgColor()">
      <div class="container-title">
        <h3 class="title />
        <img id="pic" class="greyImg" />
      </div>
      ...
    </div>
  </li>
  ...
</ul>

Java腳本

function toggleImgColor() {
  $(this).find("img").toggleClass("greyImg");
}

Answer 1

您可以執行以下操作：

$(document).ready(function(){
   $(".container").hover(function() {
      $("#pic").toggleClass("greyImg");
   });
});

Answer 2

只是通過this內部toggleImgColor()在HTML像toggleImgColor(this) ，並趕上在javascript函數的參數。 這會將當前懸停的DOM對象傳遞給toggleImgColor函數，然后您可以使用該對象顯示特定的div。

HTML：

<ul>
  <li>
    <div class="container" onmouseover="toggleImgColor(this)" onmouseout="toggleImgColor(this)">
      <div class="container-title">
        <h3 class="title />
        <img class="greyImg" />
      </div>
      ...
    </div>
  </li>
  ...
</ul>

JavaScript：

function toggleImgColor(item) {
  $(item).find("img").toggleClass("greyImg");
}