Zähler für jede Box setzen

Question

Ich habe ein paar Kästchen, die, wenn sie angeklickt werden, mild werden. Je mehr Sie klicken, desto stärker wird es zittern. Die Box wird nach 10 fortlaufenden Klicks "fallen". Alle Boxen teilen nicht den gleichen Zähler miteinander.

Ich habe den folgenden Code versucht, aber ich kann den Zähler nicht funktionieren.

Irgendwelche Seelen können mir hier helfen?

Vielen Dank im Voraus Jungs!

$(".gift").each(function(){ 
    var i = 0; 
    $(this).click(function(){ 
     if(i == 0){ 
      TweenMax.fromTo(this, 1, {x:-1}, {x:1, ease:RoughEase.ease.config({strength:8, points:5, template:Linear.easeNone, randomize:false}) , clearProps:"x"}) 
      i++; 
     } 
     console.log(i); 
    }); 
}); 

Hier ist meine codepen: http://codepen.io/Dr3am3rz/pen/ggPYEO

Answer 1

Sie müssen i auf Null vergleichen, aber nicht zuordnen.

Zweitens müssen Sie i++ aus if(){} Anweisung verschieben.

Drittens müssen Sie die benötigten Bibliotheken korrekt verknüpfen.

$(".gift").each(function(){ 
     var i = 0; 
     $(this).click(function(){ 
      if(i===0){ 
       TweenMax.fromTo(this, 1, {x:-1}, {x:1, ease:RoughEase.ease.config({strength:8, points:5, template:Linear.easeNone, randomize:false}) , clearProps:"x"}) 
      } 
       i++; 
     $(this).html("counter = "+i); 
     }); 
    }); 

Ein Ergebnis ist: http://codepen.io/anon/pen/ZLQEGr