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>

Answer 2

你可以綁定一個懸停監聽器和懸停量存儲在一個屬性，那麼你並不需要事先聲明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> 

HTML將成爲<div id="4" cnt="12">

Answer 3

沒有jQuery的

---

你需要監聽mouseenter事件：

var counters = [ 
 
    {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} 
 
]; 
 

 
var container = document.getElementById('container'); 
 
var divs = container.children; 
 
for(var i = 0; i < divs.length; i++) { 
 
    var div = divs.item(i); 
 
    div.addEventListener('mouseenter', function (evt) { 
 
     var id = evt.target.id; 
 
     var counter = findElement(counters, id); 
 
     if (counter) { 
 
      counter.hovers++; 
 
      console.log(counter); 
 
     } 
 
    }); 
 
} 
 

 
function findElement(array, id) { 
 
    for(var i = 0; i < array.length; i++) { 
 
     if (array[i].id == id) 
 
      return array[i]; 
 
    } 
 
}

<div id="container"> 
 
    <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> 
 
</div>

Answer 4

重要的是使用mouseenter事件。你可以閱讀關於它here。不要將它與mouseover混淆，這對你的例子在技術上是不正確的，因爲它也會觸發子元素（在你的案例<p>），這會導致你的懸停計數關閉。

這裏是如何使用JavaScript的解決你的問題：

(function(){ 
 

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

 
    // Use a named function, not an anonymous function 
 
    // The event {Object} parameter is passed from mouseenter 
 
    function updateHoverCount(event){ 
 

 
     // Array.forEach is used here because if the order 
 
     // of counter wasn't perfectly defined 
 
     // (EG: id of 3, id of 1, ... id of [0-9]) 
 
     // this will find the right object first and 
 
     // then update the hover count 
 
     counter.forEach(function(ele, i){ 
 

 
      // Match the id against the event target 
 
      if(ele.id === Number(event.target.id)){ 
 
       ele.hovers += 1; 
 

 
       // Logging to show in example 
 
       console.log('Element' 
 
          , event.target 
 
          , 'Total Hovers:' 
 
          , ele.hovers); 
 
      } 
 

 
     }); 
 
    } 
 

 
    // Iterate over your counter to find the elements 
 
    counter.forEach(function(ele, i){ 
 

 
     // Variable storage isn't necessary, it's provided for clarity 
 
     var div = document.getElementById(String(ele.id)); 
 

 
     // Add the mouseenter (not mouseover) event to the div 
 
     div.addEventListener('mouseenter', updateHoverCount); 
 

 
    }); 
 
    
 
})();

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

---

注重對數組原型使用.forEach。您可能需要根據瀏覽器要求來填充您的網站或應用程序。您可以查看瀏覽器規格here。 < IE9和舊版移動瀏覽器需要墊片。