如何在JQuery中動態更改顏色？

Question

按下按鈕時如何在兩種顏色之間動態變化？

Example: 
Press button = yellow
Press button = red
Press button = yellow
Press button = red
...



$('button').click(function(){
    $(this).css('color', 'yellow');
    ...
});

Answer 1

您需要通過應用類或將單擊狀態保留在變量中來保持狀態。

 $("button").on("click", function () { $(this).toggleClass("red yellow"); }); 

 .red { background-color: red; } .yellow { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="red">click</button> 

或只上一堂課

 $("button").on("click", function () { $(this).toggleClass("yellow"); }); 

 button { background-color: red; } .yellow { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>click</button> 

如果您真的想使用.css（），則需要在狀態下保存一個變量

 (function () { var state = false; $("button").on("click", function () { state = !state; $(this).css("backgroundColor", state ? "red" : "yellow"); }).trigger("click"); }()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>click</button> 

Answer 2

大概是這樣的。 基本上，您要設置一個當前顏色的變量。 並且每次單擊它都會切換顏色。 如果起始顏色是紅色，則可以將行從var yellowon = true;更改為var yellowon = true; var yellowon = false;

var yellowon = true;
$('button').click(function(){
    if (yellowon) {
        $(this).css('color', 'red');
        yellowon = false;
    }
    else {
        $(this).css('color', 'yellow');
        yellowon = true;
    }
    ...
});

Answer 3

CSS中的顏色以rgb格式返回。 您可以使用以下示例進行更改：

 $('button').click(function(){ if ($(this).css('color') == 'rgb(255, 255, 0)') { $(this).css('color', 'rgb(255, 0, 0)'); } else { $(this).css('color', 'rgb(255, 255, 0)'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button style="color: rgb(255, 255, 0)">Text</button>