javascript - 在javascript中制作一个切换按钮

Question

我想要一个切换按钮，其当前 css 背景颜色值为“红色”。第一次点击它应该变成“黄色”，第二次单击时，它会变为“绿色”，并且第三次它应该变回“红色”。

HTML

<div id="box" class="boxa"> 1 </div>

Javascript:

$('div[id="box"]').mousedown(function(){


if($(this).css ('background-color', 'red')) {
       $(this).css ('background-color', 'yellow');    
 }  

});

但这并不像 $(this).css ('background-color', 'red') 那样工作。总是返回 true，然后尝试将值存储在变量中，然后像这样检查

var color = $(this).css ('background-color');
if (color=="red") {
   // change it to some other color
} 

但这也不起作用 color返回 RGB 值。谁能帮我写一个可行的解决方案。

Answer 1

与其检查当前颜色，不如了解当前颜色!

var colors = ['red', 'yellow', 'green'];
var currentColor = 0;

然后改变就变得美好而简单:

$('#box').mousedown(function () {
    currentColor++;
    var newColor = colors[currentColor % colors.length];

    $(this).css('background-color', newColor);
});