单击按钮以使用js添加css样式

Question

我想要实现的是单击一个按钮，然后.clicked类将添加到我单击的按钮。但是当我点击其中一个按钮时，我也想删除该类。

<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：

.clicked {
  color: pink;
}

的Javascript

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/

Answer 1

您可以使用querySelector获取当前“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>

Answer 2

你可以记住＆＃34;点击了哪一个：

＆＃13;

＆＃13;

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;
}

＆＃13;

.clicked {
  color: pink;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是一个简洁的解决方案。单击时，它首先从按钮集合中删除.clicked。然后它将类添加到单击的按钮（可用作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>

Answer 4

所有答案都很好，但如果用户再次点击同一个按钮，他们就不会删除clicked课程。为此，请尝试以下示例：

＆＃13;

＆＃13;

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");
    }
}

＆＃13;

.clicked {
  color: pink;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 5

这是最短的版本

没有for-loop也没有forEach功能，只有Javascript函数querySelector

function myFunction() {
  var current = document.querySelector('.clicked')
  if (current) current.classList.remove('clicked');      
  this.classList.add('clicked');
}

＆＃13;

＆＃13;

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');
}

＆＃13;

.clicked {
  color: pink;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;