如何仅对当前元素应用jQuery实现缩略图悬停显示商品摘要

希望实现仅当鼠标悬停在product-thumbnail（商品缩略图）上时，显示对应的product-summary（商品摘要），但当前的jQuery代码会作用于所有元素。尝试添加this关键字但无效，请问如何修改代码使其仅作用于当前元素？

原代码 #

jQuery(".product-thumbnail").hover (function() {
   jQuery(".product-summary").attr("id","ps-id");
});
jQuery(".product-thumbnail").mouseout (function() {
   jQuery(".product-summary").removeAttr("id");
});

尝试修改后的代码 #

jQuery(".product-thumbnail", this).hover (function() {
    jQuery(".product-summary").attr("id","ps-id");
});
jQuery(".product-thumbnail", this).mouseout (function() {
    jQuery(".product-summary").removeAttr("id");
});

你的核心问题是在事件回调里没有基于当前触发事件的元素（即this）定位对应product-summary，而是全局选择了所有product-summary元素，因此会影响全部内容。

关键思路 #

在hover和mouseout的回调函数中，this指向当前被悬停的product-thumbnail元素，你需要根据实际DOM结构的关系，从这个元素出发找到对应的product-summary。以下是几种常见场景的修改方式：

场景1：product-summary是product-thumbnail的兄弟元素

如果DOM结构如下：

<div class="product-item">
  <div class="product-thumbnail">...</div>
  <div class="product-summary">...</div>
</div>

修改后的代码：

jQuery(".product-thumbnail").hover(function() {
  // 定位当前缩略图的兄弟元素product-summary
  jQuery(this).siblings(".product-summary").attr("id", "ps-id");
}).mouseout(function() {
  jQuery(this).siblings(".product-summary").removeAttr("id");
});

场景2：product-summary在product-thumbnail的父容器内

如果DOM结构如下：

<div class="product-item">
  <div class="product-thumbnail">...</div>
  <div class="summary-box">
    <div class="product-summary">...</div>
  </div>
</div>

修改后的代码：

jQuery(".product-thumbnail").hover(function() {
  // 先找到共同父容器，再在容器内定位目标元素
  jQuery(this).closest(".product-item").find(".product-summary").attr("id", "ps-id");
}).mouseout(function() {
  jQuery(this).closest(".product-item").find(".product-summary").removeAttr("id");
});

场景3：product-summary是product-thumbnail的子元素

如果DOM结构如下：

<div class="product-thumbnail">
  <img src="商品图地址" />
  <div class="product-summary">...</div>
</div>

修改后的代码：

jQuery(".product-thumbnail").hover(function() {
  jQuery(this).find(".product-summary").attr("id", "ps-id");
}).mouseout(function() {
  jQuery(this).find(".product-summary").removeAttr("id");
});

代码优化 #

另外，hover方法本身支持传入两个回调（分别对应鼠标进入/离开），可以合并代码让结构更简洁：

jQuery(".product-thumbnail").hover(
  // 鼠标进入时执行
  function() {
    jQuery(this).closest(".product-item").find(".product-summary").attr("id", "ps-id");
  },
  // 鼠标离开时执行
  function() {
    jQuery(this).closest(".product-item").find(".product-summary").removeAttr("id");
  }
);

内容的提问来源于stack exchange，提问作者dev-one