Question

我想通过使用jQuery在鼠标悬停时基于其子属性设置一个属性。我尝试了很多方法来实现这一目标，但是没有运气。所有属性都相同，并且悬停时不会更改。

<li class="menu-item">
  <a data-src="" class="menu-item-link" href="#">Item one</a>
  <span class="description">
    <img  src="https://i.ibb.co/LxSKFgH/image1.jpg">
  </span>
</li>

<li class="menu-item">
  <a data-src="" class="menu-item-link" href="#">Item two</a>
  <span class="description">
    <img src="https://i.ibb.co/TLJL7hq/image2.jpg">
  </span>
</li>

我想要的是，当我将鼠标悬停在.menu-item上时，我想为每个菜单的.description属性设置data-src的img属性。这意味着属性必须在其父属性上设置。

Answer 1

您可以通过执行以下jQuery脚本来实现所需的目标：

$(".menu-item").hover(function(){
   //Take the src value from the inner img tag
   let srcValue = ($(this).find("img").attr("src"));
   //Set the data-src attribute of the inner anchor tag
   $(this).find("a").attr("data-src", srcValue);
});

如何在jQuery或JavaScript中设置属性（基于子属性）？

1 个答案: