如何更改我单击的特定按钮的此按钮背景颜色?使用 javascript
How can I change this button background color of the specific button that i have clicked? using javascript
我想更改我点击的特定按钮的背景颜色,是否需要使用循环和条件?我尝试访问第一个索引,但我不知道如何更改其他按钮的背景颜色。
let buttons = document.querySelectorAll('.btn');
let arraySelected = [];
buttons.forEach(button => {
button.addEventListener('click', seatFunction);
});
function seatFunction(e) {
const {
value
} = e.target;
let newArray = arraySelected;
const index = arraySelected.findIndex((element) => element === value);
let findValue = arraySelected.find((element) => element == value);
if (index !== -1) {
console.log(`The ${value} has been removed into the array.`);
// console.log(`The ${index} is the '${value}' of the item that has been removed.`);
newArray.splice(index, 1);
console.log(newArray);
buttons[0].style.backgroundColor = null;
} else {
console.log(`${value} has been pushed into the array.`)
arraySelected.push(value);
console.log(arraySelected);
buttons[0].style.backgroundColor = "red";
}
// Checking if the array is empty.
if (arraySelected.length === 0) {
alert(`The last value '${value}' has been removed\r\nThe array now is empty!`);
}
}
<div class="wrapper">
<button class="btn seat" value="A">A</button>
<button class="btn seat" value="B">B</button>
<button class="btn seat" value="C">C</button>
<button class="btn seat" value="D">D</button>
<button class="btn seat" value="E">E</button>
<button class="btn seat" value="F">F</button>
</div>
使用循环从其他按钮中删除 bgcolor 然后将其添加到单击的按钮。
let buttons = document.querySelectorAll('.btn');
let arraySelected = [];
buttons.forEach(button => {
button.addEventListener('click', function() {
seatFunction(button)
});
});
function seatFunction(a) {
buttons.forEach(button => {
button.style.background = "none";
});
a.style.background = "red";
}
<div class="wrapper">
<button class="btn seat" value="A">A</button>
<button class="btn seat" value="B">B</button>
<button class="btn seat" value="C">C</button>
<button class="btn seat" value="D">D</button>
<button class="btn seat" value="E">E</button>
<button class="btn seat" value="F">F</button>
</div>
您正在以正确的方式接近它。您只需要遍历所有按钮并重置它们的背景,然后更改您单击的按钮的背景。
我在这个例子中使用 classList
和 CSS。
const buttons = document.querySelectorAll('.btn');
buttons.forEach(button => {
button.addEventListener('click', seatFunction, false);
});
function seatFunction() {
buttons.forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
}
.active { background-color: Tomato; }
.btn:hover { cursor: pointer; }
<div class="wrapper">
<button class="btn seat" value="A">A</button>
<button class="btn seat" value="B">B</button>
<button class="btn seat" value="C">C</button>
<button class="btn seat" value="D">D</button>
<button class="btn seat" value="E">E</button>
<button class="btn seat" value="F">F</button>
</div>
我认为您不需要所有这些(循环和条件),也不需要创建另一个数组。
首先,我建议您使用 CSS class 来更改任何样式,甚至是动态更改:
.active {
background-color: #00d4b1;
}
所以现在的逻辑是单击按钮时“如果上面有 active
class,则删除活动的 class,否则附加 active
class.
function seatFunction(e){
e.target.classList.toggle("active");
}
你的脚本开头不错:
let buttons = document.querySelectorAll('.btn');
buttons.forEach(button => {
button.addEventListener('click', seatFunction);
});
你为什么不安装jquery,你可以轻松实现。
只需将其放入您的 html header 并尝试
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
在你的JS中,这样写
$('.btn').click(function(){
$('.btn').css({"background":""});
$(this).css({"background":"red"}); //put the color you want
});