如何使用类切换功能来更改和不更改单击时的 CSS 按钮样式？答案

【问题标题】：How to have a class toggle function to change and unchange a CSS button styling on click?如何使用类切换功能来更改和不更改单击时的 CSS 按钮样式？
【发布时间】：2018-09-27 22:23:47
【问题描述】：

我正在尝试编写一个切换按钮样式的代码。起初，我认为我可以使用 CSS 和活动选择器来做到这一点。但我也希望能够撤消单击时的更改，而活动选择器没有。然后我想我可以用 JavaScript 和一个类切换功能来做到这一点。

不幸的是，我对 JavaScript 不是很熟悉。我编写了一个代码，它部分工作，但它总是改变同一个元素的样式（可能是因为它是具有特定类的第一个元素？）。

有没有一种方法可以构建一个灵活的函数，可以应用于多个元素，具体取决于我点击哪个元素？

function testtoggle() {
	if(document.getElementById("testknop").className == "nietactief"){
	document.getElementById("testknop").className = "actief";
	} else {
		document.getElementById("testknop").className = "nietactief";
	}
}

button {
	cursor: pointer;
    padding: 16px;
    font-size: 16px;
    border-radius: 100%;
}

.nietactief {
	background-color: #a8a8a8;
    border: 5px solid #ddd;
}	

.actief {
	background-color: purple;
	border: 5px solid green;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

<button type="button" id="testknop" class="nietactief" onclick="testtoggle()()">1e</button>
<button type="button" id="testknop" class="nietactief" onclick="testtoggle()">2e</button>
<button type="button" id="testknop" class="nietactief" onclick="testtoggle()()">3e</button>

</body>
</html>

【问题讨论】：

你考虑过使用 Jquery 吗？ stackoverflow.com/questions/3730035/…
嗨，亚当，我实际上没有，因为我对 jQuery 不太熟悉。有什么好处？
一般来说，Jquery 的目标是让很多任务比它的原始 Javascript 实现更容易。 Jquery 通常会减少代码行数，并且一旦习惯了语法就很容易上手。我个人更喜欢它的语法来选择元素$('#id_name') 和document.getElementById('id_name')。我不确定我是否从事过一个不使用 jquery 的 javascript 项目——它派上用场，我认为它很好学。
我会这样做的。谢谢你的建议！

标签： javascript css function button styling

【解决方案1】：

您应该查看 JavaScript 中的 classList 功能。它使在元素上添加、删除和切换类变得容易。

// Get a list of all the buttons in the group
let buttons = Array.from(document.querySelectorAll('[type=button]'))

// For each button add a click event listener
// This allows us to remove the 'onclick' from the html
buttons.forEach(item => {
  item.addEventListener('click', e => {
    // When the button is clicked, remove the active state
    // Then add the inactive state
    buttons.forEach(button => {
      // If the current button does not equal the clicked button
      // Remove the active state class
      button != e.currentTarget && button.classList.remove("actief")
      button.classList.add("nietactief")
    })
    // Toggle the state of the clicked button
    item.classList.toggle("actief")
  })
})

button {
  cursor: pointer;
  padding: 16px;
  font-size: 16px;
  border-radius: 100%;
}

.nietactief {
  background-color: #a8a8a8;
  border: 5px solid #ddd;
}

.actief {
  background-color: purple;
  border: 5px solid green;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <button type="button" id="testknop" class="nietactief">1e</button>
  <button type="button" id="testknop" class="nietactief">2e</button>
  <button type="button" id="testknop" class="nietactief">3e</button>

</body>

</html>

【讨论】：

您好，感谢您的帮助！但是，我无法通过再次单击该按钮来撤消更改。我做错了吗？

【解决方案2】：

您观察到的是document.getElementById 的预期行为

您可以传递对触发事件的按钮的引用：

window.testtoggle = function(elmnt) {
  if(elmnt.className == "nietactief"){
    elmnt.className = "actief";
  } else {
    elmnt.className = "nietactief";
  }
}

button {
	cursor: pointer;
    padding: 16px;
    font-size: 16px;
    border-radius: 100%;
}

.nietactief {
	background-color: #a8a8a8;
    border: 5px solid #ddd;
}	

.actief {
	background-color: purple;
	border: 5px solid green;
}

<button type="button" id="testknop" class="nietactief" onclick="testtoggle(this)">1e</button>
<button type="button" id="testknop" class="nietactief" onclick="testtoggle(this)">2e</button>
<button type="button" id="testknop" class="nietactief" onclick="testtoggle(this)">3e</button>

或者，您可以考虑使用JQuery 获取所有符合特定条件的 dom 元素并更新其类：

$("button").attr('class', 'newClass');

或其他客户端框架，如 vue.js

【讨论】：