我试图在悬停某个类的元素时调用一个函数。假设有100个div,其中50个有class test,所以我想要的是当我悬停在有class test的div上时调用一个函数。
<div class="test" mouseover="myfunc()">
</div>
<div class="test" mouseover="myfunc()">
</div>
<div class="test" mouseover="myfunc()">
</div>
.
.
.
<script type="text/javascript">
function myfucn(){......}
</script>
但是这变得太乏味了,所以我想要的是一个通用的方法,它针对所有的测试类元素,而不需要一次又一次地编写mouseover事件。我只喜欢javascript(因为我正在学习它),但对jquery没有问题。
7条答案
按热度按时间8zzbczxx1#
如果你不是只使用Javascript来挖矿的话,试试像这样使用Jquery。
如果你只需要JavaScript,试试这个:
更多信息
当你做
document.getElementsByClassName("test");
你会得到一个
Array
。然后你必须添加一个addEventListener("mouseover")
,让他们知道他们什么时候被悬停。之后,你写一些你想在它的函数内做的事情。bbuxkriu2#
您可以:
getElementsByClassName
),然后将事件处理程序绑定到每个元素(使用addEventListener
)* 或 *target
属性(这是事件处理程序函数的第一个参数),以查看它是否是具有您所关心的类的元素kulphzqa3#
此方法使用jQuery。
mitkmikd4#
如果你想用vanilla JS而不是jQuery来做,这里有一个基本的例子:
在这里,您基本上选择了所有具有“YOUR_CLASS”类的元素,并将一个函数绑定到mouseover事件。
lrpiutwd5#
你可以使用jQuery中的hover函数:https://api.jquery.com/hover/
例如:
此示例在悬停时添加类hover-并在悬停时删除类
o75abkj46#
如果你使用的是jQuery,代码应该类似上面的代码
zbdgwd5y7#
下面是一个简单的解决方法: