Question

我试图在特定类的元素悬停时调用函数。假设有100个div，其中50个有类测试，所以我想要的是当我用类测试将鼠标悬停在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>

但这变得太繁琐了，所以我想要的是一个通用的方法，它针对所有测试类元素而无需一次又一次地编写鼠标悬停事件。我更喜欢javascript（因为我正在学习它）但是jquery没有问题。

Answer 1

如果你不使用Javascript挖矿。尝试使用这样的Jquery。

function doSomeThing(){
     //do something
}

$("div.test").hover(function(){
     doSomeThing();
});

如果你只想要Javascript试试这个：

function doSomeThing(){
    //do something
}

var el = document.getElementsByClassName("test");
for (i in el){
    el[i].addEventListener("mouseover", function(){
        //do something here

        //or call a function
        doSomeThing();
    });
}

更多信息

执行document.getElementsByClassName("test");

时

您将获得Array。然后你必须添加一个addEventListener("mouseover")来让他们知道他们何时被徘徊。之后，你在其功能中写下你想要做的事情。

Answer 2

你可以：

获取所有元素（例如使用getElementsByClassName），然后将事件处理程序绑定到每个元素（使用addEventListener）或
将事件处理程序绑定到这些元素的祖先，然后，每次事件触发时，检查事件对象的target属性（这是事件处理函数的第一个参数）以查看它是否是您关心的课程的元素

Answer 3

此方法使用jQuery。

$('.myClass').hover(function () {
  // Do stuff here
});

Answer 4

您可以使用jQuery中的悬停功能：https://api.jquery.com/hover/

例如：

 $( "td" ).hover(
  function() {
    $( this ).addClass( "hover" );
  }, function() {
    $( this ).removeClass( "hover" );
  }
);`

此示例在悬停时添加类悬停 - 并在悬停时删除类

Answer 5

$("test").hover(
    function(event) {
    // The mouse has entered the element
    },
    function (event) {
    // The mouse has left the element
    }
 );

如果您使用JQuery，代码应该类似于上面

Answer 6

如果你想在vanilla JS而不是jQuery中这样做，这是一个基本的例子：

var elements = document.getElementsByClassName('YOUR_CLASS')
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('mouseover', function (event) {
    console.log('Element', event.target, 'is hovered')
  })
}

在这里，您基本上选择了所有具有＆＃34; YOUR_CLASS＆＃34; class并将函数绑定到mouseover事件。

如何在具有特定类的元素悬停时调用js函数？

6 个答案: