Javascript div onhover Inkrement zählen

Question

Ich habe ein paar Divs. Jedes Div hat eine eindeutige ID.

Hier sind die divs:

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

Und hier ist ein Beispiel dafür, wie die Daten aussehen würden.

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

Was ich tun muß, ist, dass jedes Mal, wenn eine bestimmte div schwebt ist es schwebt Wert um 1 erhöht

Wie kann ich dies tun, mit Javascript?

Answer 1

Sie können zuerst die Methode find() verwenden, um ein bestimmtes Objekt mit dieser ID zu finden, und wenn das Objekt gefunden wird, wird die Hover-Eigenschaft inkrementiert.

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

Sie könnten einen Hover-Hörer binden und speichern Sie die Hover-Menge in einem Attribut, dann müssen Sie vorher nicht die Gesamtzahl der divs als Variable deklarieren.

<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 wird sich <div id="4" cnt="12">

Answer 3

Ohne jQuery

---

Sie müssen für die mouseenter Veranstaltung hören:

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

Wichtig ist, das mouseenter -Ereignis zu verwenden. Sie können darüber lesen here. Verwechseln Sie es nicht mit mouseover, was technisch falsch für Ihr Beispiel ist, da es auch auf untergeordnete Elemente (in Ihrem Fall <p>) triggert, was dazu führen würde, dass Ihre Hover-Zählung ausgeschaltet ist.

Hier ist, wie Sie Ihr Problem mit Hilfe von JavaScript lösen:

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

---

Achten Sie auf die Verwendung von .forEach auf dem Array-Prototyp. Möglicherweise müssen Sie Ihre Website oder Anwendung abhängig von den Browseranforderungen anpassen. Sie können die Browserspezifikationen here überprüfen. Shims sind für < IE9 und ältere mobile Browser erforderlich.