Javascript div onhover增量计数

我有几张唱片。每个div都有一个唯一的id

以下是部门的：

<div id="1"><p>Box 1</p></div>
<div id="2"><p>Box 2</p></div>
<div id="3"><p>Box 3</p></div>
<div id="4"><p>Box 4</p></div>
<div id="5"><p>Box 5</p></div>
<div id="6"><p>Box 6</p></div>
<div id="7"><p>Box 7</p></div>
<div id="8"><p>Box 8</p></div>
<div id="9"><p>Box 9</p></div>

框1

方框2

方框3

方框4

方框5

方框6

方框7

方框8

方框9

下面是一个数据的示例

<script>

counter = [

  {id: 1, hovers: 0},
  {id: 2, hovers: 0},
  {id: 3, hovers: 0},
  {id: 4, hovers: 0},
  {id: 5, hovers: 0},
  {id: 6, hovers: 0},
  {id: 7, hovers: 0},
  {id: 8, hovers: 0},
  {id: 9, hovers: 0}

]

</script>

计数器=[
{id:1，悬停：0}，
{id:2，悬停：0}，
{id:3，悬停：0}，
{id:4，悬停：0}，
{id:5，悬停：0}，
{id:6，悬停：0}，
{id:7，悬停：0}，
{id:8，悬停：0}，
{id:9，悬停：0}
]

我需要做的是，每当一个特定的div被悬停时，它的悬停值就会增加1

---

如何使用Javascript实现这一点？

您可以首先使用

find（）

方法查找具有该id的特定对象，如果找到该对象，则增加其悬停属性

var计数器=[{id:1，hovers:0}，{id:2，hovers:0}，{id:3，hovers:0}，{id:4，hovers:0}，{id:5，hovers:0}，{id:6，hovers:0}，{id:7，hovers:0}，{id:8，hovers 0}，{id:9，hovers 0}]
$（'div'）.mouseover（函数（）{
var obj=counter.find（e=>e.id==$（this.attr（'id'））
如果（obj）obj悬停++
控制台日志（obj）
})

方框1

方框2

方框3

方框4

方框5

方框6

方框7

方框8

框9

您可以首先使用

find（）

方法查找具有该id的特定对象，如果找到该对象，则增加其悬停属性

var计数器=[{id:1，hovers:0}，{id:2，hovers:0}，{id:3，hovers:0}，{id:4，hovers:0}，{id:5，hovers:0}，{id:6，hovers:0}，{id:7，hovers:0}，{id:8，hovers 0}，{id:9，hovers 0}]
$（'div'）.mouseover（函数（）{
var obj=counter.find（e=>e.id==$（this.attr（'id'））
如果（obj）obj悬停++
控制台日志（obj）
})

方框1

方框2

方框3

方框4

方框5

方框6

方框7

方框8

框9

您可以绑定一个悬停侦听器并将悬停量存储在一个属性中，这样您就不需要事先将div的总数声明为一个变量

<script type="text/javascript">
    $("div").hover(function () {
        if ($(this).attr("cnt") == null) {
            $(this).attr("cnt", "0");
        }
        $(this).attr("cnt", parseInt($(this).attr("cnt")) + 1);
    });
</script>

$（“div”）.hover（函数（）{
if（$（this）.attr（“cnt”）==null）{
$（此）.attr（“cnt”，“0”）；
}
$（this.attr（“cnt”），parseInt（$（this.attr（“cnt”））+1）；
});

---

HTML将变成

您可以绑定一个悬停侦听器并将悬停量存储在一个属性中，然后您不需要事先将div的总数声明为一个变量

<script type="text/javascript">
    $("div").hover(function () {
        if ($(this).attr("cnt") == null) {
            $(this).attr("cnt", "0");
        }
        $(this).attr("cnt", parseInt($(this).attr("cnt")) + 1);
    });
</script>

$（“div”）.hover（函数（）{
if（$（this）.attr（“cnt”）==null）{
$（此）.attr（“cnt”，“0”）；
}
$（this.attr（“cnt”），parseInt（$（this.attr（“cnt”））+1）；
});

没有jQuery，HTML将变成

---

您需要收听以下活动：

var计数器=[
{id:1，悬停：0}，
{id:2，悬停：0}，
{id:3，悬停：0}，
{id:4，悬停：0}，
{id:5，悬停：0}，
{id:6，悬停：0}，
{id:7，悬停：0}，
{id:8，悬停：0}，
{id:9，悬停：0}
];
var container=document.getElementById（'container'）；
var divs=container.children；
对于（变量i=0；i

方框1

方框2

方框3

方框4

方框5

方框6

方框7

方框8

方框9

不带jQuery

---

您需要收听以下活动：

var计数器=[
{id:1，悬停：0}，
{id:2，悬停：0}，
{id:3，悬停：0}，
{id:4，悬停：0}，
{id:5，悬停：0}，
{id:6，悬停：0}，
{id:7，悬停：0}，
{id:8，悬停：0}，
{id:9，悬停：0}
];
var container=document.getElementById（'container'）；
var divs=container.children；
对于（变量i=0；i

方框1

方框2

方框3

方框4

方框5

方框6

方框7

方框8

方框9

重要的是使用mouseenter事件。您可以阅读相关内容。不要将其与mouseover混淆，这在技术上对您的示例是不正确的，因为它也会在子元素上触发（在您的示例中，

），这会导致您的悬停计数关闭

下面是使用JavaScript解决问题的方法：

（函数（）{
变量计数器=[
{id:1，悬停：0}，
{id:2，悬停：0}，
{id:3，悬停：0}，
{id:4，悬停：0}，
{id:5，悬停：0}，
{id:6，悬停：0}，
{id:7，悬停：0}，
{id:8，悬停：0}，
{id:9，悬停：0}
];
//使用命名函数，而不是匿名函数
//事件{Object}参数是从mouseenter传递的
函数updateHoverCount（事件）{
//此处使用Array.forEach，因为如果
//计数器的定义并不完美
//（例如：id为3，id为1，…id为[0-9]）
//这将首先找到正确的对象，然后
//然后更新悬停计数
计数器forEach（功能（ele，i）{
//将id与事件目标匹配
if（ele.id==Number（event.target.id））{
元素悬停+=1；
//要在示例中显示的日志记录
欺骗