Javascript div onhover 增量计数

Question

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

这是 div 的:

<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>

这是数据外观的示例。

<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>

我需要做的是，每次悬停特定的 div 时，它的悬停值都会增加 1。

如何使用 Javascript 做到这一点？

Answer 1

您可以首先使用 find() 方法查找具有该 id 的特定对象，如果找到对象，则增加其悬停属性。

var 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}]

$('div').mouseover(function() {
  var obj = counter.find(e => e.id == $(this).attr('id'))
  if(obj) obj.hovers++
  console.log(obj)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>