[英]Click button to add a css style with js
What I want to achieve is to click one button and then the .clicked class will be added to the button I am clicking. 我要实现的是单击一个按钮,然后将.clicked类添加到我单击的按钮中。 But I also want to remove the class when I click one of the other buttons.
但是,当我单击其他按钮之一时,我也想删除该类。
<div>
<button class="btn-color-black btn">Yo!</button>
<button class="btn-color-black btn">Yo!</button>
<button class="btn-color-black btn">Yo!</button>
</div>
Css: CSS:
.clicked {
color: pink;
}
Javascript Java脚本
var btn = document.getElementsByClassName("btn");
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", myFunction);
}
function myFunction() {
var parentElement = this.parentElement;
if (this.classList.length <= 2) {
this.classList.add("clicked");
} else {
this.classList.remove("clicked");
}
}
https://jsfiddle.net/saj9oxyv/7/ https://jsfiddle.net/saj9oxyv/7/
What you can do is use querySelector
to grab the current "clicked" element, remove the class, and then add the class to the clicked element. 您可以做的是使用
querySelector
捕获当前的“ clicked”元素,删除该类,然后将该类添加到clicked元素中。
var btn = document.getElementsByClassName("btn"); for (var i = 0; i < btn.length; i++) { btn[i].addEventListener("click", myFunction); } function myFunction() { var parentElement = this.parentElement; var previousElement = document.querySelector('.clicked'); if (previousElement) { previousElement.classList.remove('clicked'); } if (this.classList.length <= 2) { this.classList.add("clicked"); } else { this.classList.remove("clicked"); } }
.clicked { color: pink; }
<div> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> </div>
You can "remember" which one was clicked: 您可以“记住”单击了哪个:
var lastBtn; var btn = document.getElementsByClassName("btn"); for (var i = 0; i < btn.length; i++) { btn[i].addEventListener("click", myFunction); } function myFunction() { if (lastBtn) lastBtn.classList.remove("clicked"); this.classList.add("clicked"); lastBtn = this; }
.clicked { color: pink; }
<div> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> </div>
Here is a concise solution. 这是一个简洁的解决方案。 On click, it first removes
.clicked
from the button collection. 单击时,它首先从按钮集合中删除
.clicked
。 Then it adds the class to the clicked button (which is available as event.target
, the event (object) that triggered the function is always passed to the event handler automatically). 然后,它将类添加到单击的按钮(可作为
event.target
,触发该函数的事件(对象)始终自动传递给事件处理程序)。
var btn = document.getElementsByClassName("btn"); for (var i = 0; i < btn.length; i++) { btn[i].addEventListener("click", myFunction); } function myFunction(event) { Array.forEach.call(0, btn, function(btn) { btn.classList.remove("clicked"); }); event.target.classList.add("clicked"); }
.clicked { color: pink; }
<div> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> </div>
All answers are good, but they don't remove the clicked
class if the user clicks the same button again. 所有答案都是好的,但是如果用户再次单击相同的按钮,它们不会删除
clicked
类。 To do it try this example: 为此,请尝试以下示例:
let btn = document.getElementsByClassName("btn"); for (let i = 0; i < btn.length; i++) { btn[i].addEventListener("click", myFunction); } function myFunction() { if (!this.classList.contains("clicked")) { let prev = document.querySelector('.clicked') if (prev) prev.classList.remove("clicked"); this.classList.add("clicked"); } else { this.classList.remove("clicked"); } }
.clicked { color: pink; }
<div> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> </div>
Without for-loop
nor forEach
function, just Javascript function querySelector
没有
for-loop
或forEach
函数,只有Javascript函数querySelector
function myFunction() {
var current = document.querySelector('.clicked')
if (current) current.classList.remove('clicked');
this.classList.add('clicked');
}
var btn = document.getElementsByClassName("btn"); for (var i = 0; i < btn.length; i++) { btn[i].addEventListener("click", myFunction); } function myFunction() { var current = document.querySelector('.clicked') if (current) current.classList.remove('clicked'); this.classList.add('clicked'); }
.clicked { color: pink; }
<div> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> <button class="btn-color-black btn">Yo!</button> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.