JavaScriptの変数を1つのボタンのステータスに使用する

Question

変数を使用してボタンの色を変更しています。私は色の最初の時間を変更すると、私は2番目のクリックで変更しないでよ：

function Status(){ 
    var flag = 0; 
    if(flag == 0){ 
     flag = 1; 
     return 0; 
    } 
    if(flag == 1){ 
     flag = 0; 
     return 1; 
    } 
} 

$("#lampada1").click(function() { 
    if (Status() == 0) { 
     $("#lampada1").removeClass("botaoVermelho").addClass("botaoVerde"); 
    } 
    if (Status() == 1) { 
     $("#lampada1").removeClass("botaoVerde").addClass("botaoVermelho"); 
    }); 
}); 

Answer 1

はグローバルスコープでflag変数を定義するか、それは次のようになります常に0 Status()内側：

var flag = 0; 

function Status(){ 
    if(flag == 0){ 
     flag = 1; 
     return 0; 
    } 
    if(flag == 1){ 
     flag = 0; 
     return 1; 
    } 
} 
$("#lampada1").click(function() { 
    if (Status() == 0) { 
     $("#lampada1").removeClass("botaoVermelho").addClass("botaoVerde"); 
    } 
    if (Status() == 1) { 
     $("#lampada1").removeClass("botaoVerde").addClass("botaoVermelho"); 
    } 
}); 

注：addClass/removeClassの代わりにtoggleclass()を使用する方が良いでしょう。

これが役に立ちます。

$("#lampada1").click(function() { 
 
    $(this).toggleClass("botaoVermelho botaoVerde"); 
 
});

.botaoVermelho{ 
 
    background-color: green; 
 
} 
 

 
.botaoVerde{ 
 
    background-color: red; 
 
} 
 

 
#lampada1{ 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id='lampada1' class="botaoVermelho">Lampda 1</button>

Answer 2

あなたはこのように、これを実現することができます。あなたも、実際には2つのクラスを必要としない

$("#lampada1").click(event => $(event.target).toggleClass("botaoVerde botaoVermelho")); 

、適用された最後のクラスが動作します（それがより読みやすく、より少ないのですが、あなたが2つを使用する場合は壊れやすい）

$("#lampada1").click(event => $(event.target).toggleClass("botaoVermelho"))

.botaoVerde { color: green } 
 
.botaoVermelho { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="botaoVerde botaoVermelho" type="button" id="lampada1">half a button</button>