Wenn Anweisung immer das gleiche Ergebnis zeigt - JQuery

Question

Ich versuche ein Spiel zu machen, das den Spieler bei jedem Klick in einem bestimmten Bereich umschaltet. Hier ist der Code:

$(function() { 
    var turn = 2; 

    if (turn == 1) { 
    $(".box").on("click", function() { 
     var $thisBox = $(this).children(); 
     $thisBox.addClass("x").animate({ 
     opacity: 1 
     }, 1000); 
    }); 
    turn = 2; 
    } else if (turn == 2) { 
    $(".box").on("click", function() { 
     var $thisBox = $(this).children(); 
     $thisBox.addClass("o").animate({ 
     opacity: 1 
     }, 1000); 
    }); 
    turn = 1; 
    } else { 
    document.write("Uh Oh"); 
    } 
}); 

Dies führt weiterhin die Aktionen in (Turn == 2). Ich möchte, dass sie bei jedem Auftreten des Klickereignisses wechseln.

Answer 1

Sie brauchen nur einmal die onClick Zuhörer setzen und den Wert des turn Wert innerhalb der Funktion durch das onClick Ereignis aufgerufen überprüfen.

$(function() { 
 
    var turn = 2; 
 
    
 
    $(".box").on("click", function() { 
 
    if (turn === 1) { 
 
     console.log('foo'); 
 
     turn = 2; 
 
    } else if (turn === 2) { 
 
     console.log('bar'); 
 
     turn = 1; 
 
    } else { 
 
    console.log("Uh Oh"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='box'>Click me</div>