javascript - 将鼠标悬停在元素上时显示警报

标签 javascript

当我将鼠标悬停在具有类包装器属性的 div 上时,我想显示没有属性类包装器的 div 数量的警报。这看起来很容易,但我就是看不出我做错了什么。 这是代码:

<!DOCTYPE html> 
<html> 
<head>
</head>
<body>
<div class ="wrapper"> <p> aa </p> </div>
<div class ="wrapper"> <p> dd </p> </div>
<div class ="wrapper"> <p> cc </p> </div>
<div> <p> bb </p> </div> 
<div> <p> bb </p> </div> 
<div> <p> bb </p> </div> 
</body>
<script type ="text/javascript">
var divs = document.getElementsByClassName('wrapper');
var ps =document.getElementsByTagName('p');
for (var i=0; i<divs.length; i++){
divs[i].onhover =function(){
var intervalId = setInterval(function(){
alert(ps.length - divs.length)},5000);
setTimeout(function(){clearInterval(intervalId);},25000);
}
}
</script>
</html>

最佳答案

您可以使用document.getElementsByTagName来获取div的总数和 document.getElementsByClassName 使用类包装器获取 div

然后使用addEventListener向此div添加mouseover事件

var getTotoalDiv = document.getElementsByTagName('div');
var divs = document.getElementsByClassName('wrapper');
var divWithoutWrapper = (getTotoalDiv.length - divs.length);

// Converting nodelist to array since `divs` is a HTMLCollection
var getNodesArray = Array.prototype.slice.call(divs);
getNodesArray.forEach(function(item) { //using array#forEach method to loop 
  item.addEventListener('mouseover', function() {
    alert(divWithoutWrapper)
  })
});

JSFIDDLE

关于javascript - 将鼠标悬停在元素上时显示警报,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39314472/

相关文章:

javascript - 悬停时的 Jquery 图像 alt

javascript - 虚拟化 : Dependent v-select based on selection

javascript - 如何解决去抖用户输入的竞争条件?

javascript - Excel自定义函数返回数组公式

javascript - 如何更改 OpenLayers 5.3 的图 block 语言

javascript - 如何在 IE 中查看 JavaScript/JQuery 代码的错误消息?

javascript - PhantomJS 的 includeJs 没有被执行

php - 使用 php 或 javascript 将用户登录到受 Apache 基本身份验证 (htaccess/htpasswd) 保护的目录

javascript - 输入从日期和截止日期时,在 JavaScript 中计算年月日期间

javascript - 调试在图库中复制较大图像的 Javascript 代码。