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>

的Javascript

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

Answer 1

你可以这样做：

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

Answer 2

只需在this内的toggleImgColor()内传递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");
}

选择盛大的儿童元素

2 个答案: