脚本改变背景css在多次点击

Question

我有一个按钮，当按下时改变div

的背景

按钮代码:

<a id="btn1" href="#">Press Me!</a>

自定义类，我的div应该更改

#main.class1
{
background-color: red;
}
#main.class2
{
background-color: blue;
}
etc...

最后是脚本:

$("#btn1").click(function() {
 $('#main').removeClass();
 $('#main').addClass('class1');
});
$("#btn2").click(function() {
 $('#main').removeClass();
 $('#main').addClass('class2');
});
$("#btn3").click(function() {
 $('#main').removeClass();
 $('#main').addClass('class3');
});

这一切都是有效的，但我想要实现的是只有一个按钮，而不是几个。我希望每次按下这个按钮时，它的背景颜色都能不断变化。谢谢。

Answer 1

使用以下方法

var colorArray = ["class1,class2,class3"];
var colorIndex = 0;
$("#btn1").click(function() {
 if(colorIndex == colorArray.length)
 {
    colorIndex = 0;
 }
 $('#main').removeClass();
 $('#main').addClass(colorArray[colorIndex++]);
});

Answer 2

如果你想随机挑选颜色，

<div id="main">
<a id="btn1" href="#">Press Me!</a>
</div>
#main.class1
{
background-color: red;
}
#main.class2
{
background-color: blue;
}
#main.class3
{
background-color: green;
}
#main.class4
{
background-color: yellow;
}

$("#btn1").click(function() {
 $('#main').removeClass();   
 $('#main').addClass('class'+(Math.floor(Math.random() * 4) + 1) );
});

Answer 3

如果您希望它是随机的:

$("#btn1").click(function(e) {
  e.preventDefault();
  $("#main").removeClass().addClass("class" + (parseInt(Math.random() * 3) + 1).toString());
});

#main.class1
{
  background-color: red;
}
#main.class2
{
  background-color: blue;
}
#main.class3
{
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="main">
  <a id="btn1" href="#">Press Me!</a>
</div>

但如果你喜欢线性:

var _currentBg = 1, _maxBg = 3;
$("#btn1").click(function(e) {
  e.preventDefault();
  if (_currentBg === _maxBg) _currentBg = 1;
  else _currentBg++;
  $("#main").removeClass().addClass("class" + _currentBg.toString());
});

#main.class1
{
  background-color: red;
}
#main.class2
{
  background-color: blue;
}
#main.class3
{
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="main">
  <a id="btn1" href="#">Press Me!</a>
</div>

Answer 4

标记的答案是完美的，但如果有人想在不使用类的情况下以线性方式改变颜色，请尝试:

<a id="btn1">Press Me!</a> 
<div id="main" style="width:100px;height:100px;" data-next="1"></div>
$('#btn1').click(function(){
    // enter as many colors as you want here: 
    var colorsArray = ['red','blue','green'];
    var next = $('#main').attr('data-next');
    if(next > colorsArray.length - 1){next = 0;} 
    $('#main').css('background-color',colorsArray[next]);
    $('#main').attr('data-next',Number(next)+1); 
});