Javascript 多次单击即可更改背景css的脚本

我有一个按钮，按下时会改变div的背景

按钮代码：

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

最后是剧本：

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

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

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

这一切都是可行的，但我试图实现的是只有一个按钮，而不是几个按钮。我希望这个按钮每次按下时都能不断改变背景色。谢谢

使用以下方法

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

使用以下方法

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

---

或者如果你想随机挑选颜色

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

#main.class1
{
背景色：红色；
}
#main.class2
{
背景颜色：蓝色；
}
#main.class3
{
背景颜色：绿色；
}
#main.class4
{
背景颜色：黄色；
}
$（“#btn1”）。单击（函数（）{
$（'#main'）.removeClass（）；
$（'#main'）.addClass（'class'+（Math.floor（Math.random（）*4）+1））；
});

或者如果您想随机选择颜色

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

#main.class1
{
背景色：红色；
}
#main.class2
{
背景颜色：蓝色；
}
#main.class3
{
背景颜色：绿色；
}
#main.class4
{
背景颜色：黄色；
}
$（“#btn1”）。单击（函数（）{
$（'#main'）.removeClass（）；
$（'#main'）.addClass（'class'+（Math.floor（Math.random（）*4）+1））；
});

如果希望它是随机的：

$（“#btn1”）。单击（函数（e）{
e、 预防默认值（）；
$（“#main”）.removeClass（）.addClass（“class”+（parseInt（Math.random（）*3）+1.toString（））；
});
#main.class1
{
背景色：红色；
}
#main.class2
{
背景颜色：蓝色；
}
#main.class3
{
背景颜色：绿色；
}
如果希望它是随机的：


$（“#btn1”）。单击（函数（e）{
e、 预防默认值（）；
$（“#main”）.removeClass（）.addClass（“class”+（parseInt（Math.random（）*3）+1.toString（））；
});
#main.class1
{
背景色：红色；
}
#main.class2
{
背景颜色：蓝色；
}
#main.class3
{
背景颜色：绿色；
}
标记的答案非常完美，但如果有人想在不使用类的情况下以线性方式更改颜色，请尝试以下方法：

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

按我！
$（'#btn1'）。单击（函数（）{
//在此处输入所需的任意颜色：
var colorsArray=['红色'，'蓝色'，'绿色']；
var next=$（'#main'）.attr（'data-next'）；
如果（next>colorsArray.length-1）{next=0；}
$（'#main'）.css（'background-color'，colorsArray[next]）；
$（'#main'）.attr（'data-next'，Number（next）+1）；
}); 
标记的答案非常完美，但如果有人想在不使用类的情况下以线性方式更改颜色，请尝试以下方法：

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

按我！
$（'#btn1'）。单击（函数（）{
//在此处输入所需的任意颜色：
var colorsArray=['红色'，'蓝色'，'绿色']；
var next=$（'#main'）.attr（'data-next'）；
如果（next>colorsArray.length-1）{next=0；}
$（'#main'）.css（'background-color'，colorsArray[next]）；
$（'#main'）.attr（'data-next'，Number（next）+1）；
}); 
不错！甚至更好。谢谢，很好！甚至更好。谢谢