在javascript中创建一个Toggle按钮

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
} 

但这不能作为colorRGB中的返回值.谁能帮我写一个有效的解决方案.

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