您需要首先拆分分配点击处理程序的代码。
为避免不必要的查询，您可以查询一次，然后多次使用结果。
const main = document.querySelector('#all');
const ones = document.querySelectorAll('.one');
然后将处理程序分配给切换它们的按钮。它会通过迭代你得到的元素来切换它们。
我假设您还想切换“主”按钮，如果没有，请删除该行。
main.addEventListener('click', function (e) {
e.target.style.backgroundColor = "red";
ones.forEach( el => {
el.style.backgroundColor = "red";
});
});
然后是“切换一个”按钮，遍历它们并分配一个只影响被点击元素的处理程序。
ones.forEach( el => {
el.addEventListener('click', function (e) {
e.target.style.backgroundColor = "red";
});
});
const main = document.querySelector('#all');
const ones = document.querySelectorAll('.one');
const updatedColor = 'red';
const originalColor = main.style.backgroundColor;
main.addEventListener('click', function (e) {
updateColor(e.target);
ones.forEach( el => {
updateColor(el);
});
});
ones.forEach( el => {
el.addEventListener('click', function (e) {
updateColor(el);
});
});
// Update the element color based on the current color
function updateColor(el) {
if (el.style.backgroundColor === originalColor) {
el.style.backgroundColor = updatedColor;
} else {
el.style.backgroundColor = originalColor;
}
}
<button id="all" type="button">All</button>
<button class="one" type="button">A</button>
<button class="one" type="button">B</button>
<button class="one" type="button">C</button>
更新：要处理在第二次或任何偶数次点击时返回原始颜色，我们可以首先将原始颜色存储在一个常量中。
const originalColor = main.style.backgroundColor;
然后使用该常量，有条件地更新按钮背景颜色，最好在单独的函数中进行，以避免重复。
function updateColor(el) {
if (el.style.backgroundColor === originalColor) {
el.style.backgroundColor = updatedColor;
} else {
el.style.backgroundColor = originalColor;
}
}