jQuery - if/else nach erneutem function aufruf

[eRohde]

Hallo Leute,

ich habe ein Problem bei einer if-else-Bedingung, dessen Lösung ich einfach nicht finde.

function beispiel(){

     vergleich = 2;
     zaehler = 0;
  
     $(".div1").on("click", function(){
           if (zaehler < vergleich){
               $(".div2").show();
               zaehler++;
           } else {
               $(".div2").hide();
           }
     });               
}
beispiel();
           
$(".nochmal").on("click", function(){
     beispiel();
});

Wenn ich nun beim ersten Aufruf des Scripts auf div1 clicke, wird der zaehler bei jedem click um 1 erhöht, das div2 wird angezeigt, bis der zähler = 2 ist und das div2 wieder ausgeblendet wird. Bis hierhin ist alles gut.
Rufe ich nun über .nochmal die function beispiel erneut auf, ist der zaehler wieder auf 0 gestellt. Ebenfalls gewollt.
Aber, wenn ich jetzt wieder auf div clicke, durchläuft er die if/else-Bedingung bis else erreicht ist. Er stellt also bei einmal clicken den zähler schrittweis auf 2 und zeigt das div2 erst garnicht an. Warum passiert das?

Meine Überlegung ist, dass beim ersten Durchlauf des Scripts irgendwas im Cache gespeichert wurde, auf das beim zweiten Durchlauf zurückgegriffen wird.

Ich hoffe, mir kann jemand helfen. =)

 

[fakerer]

Hi,
ich vermute mal das Problem könnte in der on click Funktion in einer Funktion sein.
ich würde das ganze so machen finde ich dann auch übersichtlicher.

var zaehler = 0;
var vergleich = 2;

function runBeispiel(){
    if (zaehler < vergleich){
        $(".div2").show();
        zaehler++;
    } else {
        $(".div2").hide();
    }
}

$(".div1").click(function() {
  runBeispiel();
});

$(".nochmal").click(function() {
  zaehler = 0;
  runBeispiel();
});

 

[eRohde]

Moin fakerer,

du hast Recht! Jetzt wo die Funktion zunächst ausgelagert und einzeln aufgerufen wird, klappts - auch mit on click.
Ich danke Dir!