我有一个向按钮插入一个类的函数,这个类改变了它们的颜色,只有这个函数不能设置为所有这些,以便在单击按钮时添加该类。
它只适用于一个,我还需要单击“颜色”按钮以更改颜色,我想将类添加到单击它的按钮中,而不需要另一个,所有这些都使用 javascript
function color() {
var color = document.querySelector(".buttons button");
color.classList.toggle("edit");
}
.edit{
background-color: #ff0 !important;
}
<div class="buttons">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
<br>
<button onclick="color()">color</button>
这是纯JS中的代码及其解释:
运行代码片段,以便您可以看到它正在工作。
我还告诉你如何用 JQuery 来做:
document.querySelector
document.querySelectorAll
记住这一点,您可以使用 将 分配
onclick
给每个按钮,forEach
顺便用toggle
更改它们forEach
。通过仅使用CSS及其有用的伪类的可能解决方案:
这是我的答案:首先,我选择位于具有 class 的元素内的所有按钮
.buttons
。每个按钮之后(颜色)
buttons.forEach
单击按钮时
button.addEventListener("click",...
添加或删除类
.edit
:button.classList.toggle("edit");
我希望这是你问的。
这是一种通过为按钮分配 id 来实现此目的的方法,单击时使用 rgba 类更改单元格的颜色: