在javascript中制作一个切换按钮答案

【问题标题】：make a Toggle button in javascript在javascript中制作一个切换按钮
【发布时间】：2016-04-07 11:30:48
【问题描述】：

我想要一个切换按钮，它的当前 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 形式返回值。谁能帮我写一个可行的解决方案。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

而不是检查当前颜色，知道当前颜色！

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

然后更改变得简单明了：

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

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

【讨论】：

你能解释一下colors[currentColor % colors.length]吗？
@RameshPareek: currentColor % colors.length 是currentColor 除以colors.length 的余数。随着currentColor 增加 0, 1, 2, 3, 4, 5, 6, ..., currentColor % colors.length 为 0, 1, 2, 0, 1, 2, 0, ...。换句话说，它会在你到达数组末尾后返回到数组的开头。
有趣的逻辑！

【解决方案2】：

不太详细的方法可能是：

JS（jQuery）：

$(".toggledRed").click(function() {
    $(this).toggleClass("toggledYellow");
}); 


$(".toggledYellow").click(function() {
    $(this).toggleClass("toggledGreen");
}); 


$(".toggledGreen").click(function() {
    $(this).toggleClass("toggledRed");
});

CSS：

.toggledRed{
    background-color:#FF0000;
}

.toggledYellow{
    background-color:#FFFF00;
}

.toggledBlue{
    background-color:#0000FF;
}

并以以下方式开始您的 HTML：

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

应该可以。

【讨论】：

它会通过一个小改动来工作：事件委托。 $('#box').parent().on('click', '.toggledRed', …);。否则$('.toggledYellow') 和$('.toggledGreen') 不会选择任何内容，也不会添加任何事件监听器。

【解决方案3】：

您可以使用以下代码：（不是很优雅但功能强大，LOL）

$(document).ready(function() {
  $('#b1').click(function() {
    var b = $(this);
    if (b.hasClass("red-class")) {
      b.removeClass("red-class");
      b.addClass("yellow-class");
    } else
    if (b.hasClass("yellow-class")) {
      b.removeClass("yellow-class");
      b.addClass("green-class");
    } else
    if (b.hasClass("green-class")) {
      b.removeClass("green-class");
      b.addClass("red-class");
    }
  });
});

body {
  padding: 5px;
}
label {
  font-weight: bold;
}
input[type=text] {
  width: 20em
}
p {
  margin: 1em 0 0;
}
.green-class {
  background-color: #2b542c;
}
.red-class {
  background-color: #ff0000;
}
.yellow-class {
  background-color: #ffff00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<label>Change Color in Button</label>
<button id="b1" class="green-class">Hello</button>

JsFiddle link

【讨论】：