如何在jQuery或JavaScript中設置屬性（基於子屬性）？

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我想在每個菜單的data-src屬性上設置.description的img屬性。 這意味着必須在其父屬性上設置Attribute。

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);
});