在鼠标悬停时显示“添加到购物车”不适用于类似的 elementId

Displaying 'Add to Cart' on mouse over does not work for similar elementId

本文关键字：适用于 不适用 elementId 购物车 悬停 鼠标 显示 添加      更新时间：2023-09-26

我有以下代码用于显示Add to Cart onmouseover。如果只有 1 个类似 ID 的项目，它可以完美运行，但在某些情况下，可以在同一页面中多次显示相同的product，并且Add to Cart按钮不会显示给当前对象，而是显示给该特定ID的第一个element。

## Category A ##
<div onmouseover="document.getElementById('addtocart1').style.display='block'" onmouseout="document.getElementById('addtocart1').style.display='hidde'">
<span style="display:none;" id="addtocart1"></span>
          Product A
</div>
## Category B ##
<div onmouseover="document.getElementById('addtocart1').style.display='block'" onmouseout="document.getElementById('addtocart1').style.display='hidde'">
<span style="display:none;" id="addtocart1"></span>
       Product A
</div>

如何将display:block设置为respective object用户mouse

谢谢

首先你复制ID是行不通的.但是下面的代码会起作用。Finlay 为什么不使用 Jquery 这很容易

onmouseover="this.children[0].style.display='block'" onmouseout="this.children[0].style.display='none'"

正如在关于该问题的一条评论中所述，元素 ID 必须是唯一的。如果您希望所有对象都有共同点，请尝试为它们提供一个类，然后document.getElementsByClassName将返回一个数组，其中包含具有该类的所有元素。然后遍历该数组并执行您需要执行的任何操作。您还需要将所有这些放在一个被称为 onmouseover 和 onmouseout 的函数中，因为您将执行多行代码。

或者，如果你要使用类似JQuery的东西，你可以使用CSS选择器来获取类，然后，$('.className'). mouseover (function)和$('.className'). mouseout (function)，会将该函数应用于具有该类的所有元素。

相关文章：