javascript - 在 JavaScript 上使用一个变量从一个按钮到一个状态

Question

我正在使用变量来更改按钮颜色的状态。当我第一次改变颜色时，我不会在第二次点击时改变:

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 变量，否则它将在 Status() 中始终为 0 :

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");   
    }
});

注意:最好使用 toggleclass() 而不是 addClass/removeClass。

希望这对您有所帮助。

$("#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>