var a = ["red", "blue", "green"];
var i = 0
$(".button").click(function() {
i ;
if (i >= 3) {
i = 0;
}
console.log(i);
$("body").addClass(a[i]);
console.log(a[i]);
});.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="button">Click</button>它可以從白色變成藍色和綠色，但如果我再次單擊按鈕，它不會變成紅色、藍色和綠色。但控制臺顯示 1,2,0,1,2,0 以及藍色、綠色、紅色、藍色
uj5u.com熱心網友回復：
你的問題是你永遠不會洗掉舊類，所以最終身體有所有三個類，它只使用最后一個。添加
$("body").removeClass(a[i]);
到您的點擊處理程式的開頭：
var a = ["red", "blue", "green"];
var i = 0
$(".button").click(function() {
$("body").removeClass(a[i]);
i ;
if (i >= 3) {
i = 0;
}
console.log(i);
$("body").addClass(a[i]);
console.log(a[i]);
});.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button type="button" class="button">Click</button>
</body>uj5u.com熱心網友回復：
由于您正在使用jquery，您應該使用 like$("body").attr('class',a[i]); addClass將在單擊后添加所有他的類。attr將一次添加 1 個類。
var a=["red","blue","green"];
var i=0
$(".button").click(function(){
i ;
if(i>=3){
i=0;
}
console.log(i);
$("body").attr('class',a[i]);
console.log(a[i]);
});.red{
background-color:red;
}
.blue{
background-color:blue;
}
.green{
background-color:green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button type="button" class="button">Click</button>uj5u.com熱心網友回復：
這將在檔案中添加和洗掉不同的顏色類，并且不會影響之前可能已分配的任何其他檔案類。
const a = ["red", "blue", "green"];
a.i=-1;a.col=function(){const cl=document.body.classList;
cl.remove(this[this.i ]);
cl.add(this[this.i%=3]);
console.log(this.i,this[this.i]);
};
document.querySelector(".button").onclick=ev=>a.col();.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}<button type="button" class="button">Click</button>uj5u.com熱心網友回復：
更改$("body").addClass(a[i]);為document.body.className = a[i];
而且你不需要 jQuery。
像這樣：
var a = ["red", "blue", "green"];
var i = 0
document.querySelector(".button").addEventListener( 'click', function() {
i ;
if (i >= 3) {
i = 0;
}
console.log(i);
document.body.className = a[i];
console.log(a[i]);
});.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}<button type="button" class="button">Click</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/492753.html
標籤：javascript 数组 按钮