如何在单击时更改某些按钮类答案

【问题标题】：How to change certain button class on click如何在单击时更改某些按钮类
【发布时间】：2020-06-12 21:22:11
【问题描述】：

我正在尝试创建一个带有“btn inactive”类的 Html 按钮，单击该按钮时会更改为“btn active”。我试过使用className，但这只会导致错误。任何有 Javascript 经验的人都知道如何做到这一点？

【问题讨论】：

这能回答你的问题吗？ jquery change class name

【解决方案1】：

不需要 jQuery：

document.querySelector('button.btn').addEventListener('click', function() {
  this.classList.toggle('inactive');
  this.classList.toggle('active');
  console.log(this.className);
});

<div id="test">
  <button class="btn inactive">Click me!</button>
</div>

使用 jQuery：

$('button.btn').click(function(){
  $(this).toggleClass('inactive');
  $(this).toggleClass('active');
  console.log(this.className);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
  <button class="btn inactive">Click me!</button>
</div>

【讨论】：

【解决方案2】：

您只需使用button.classList.toggle()。

const button = document.getElementById('this-button');

button.addEventListener('click', function(){
  this.classList.toggle('active');
  this.classList.toggle('inactive');
});

.active { color: blue }
.inactive { color: red }

&lt;button id="this-button" class="btn active"&gt;Click me&lt;/button&gt;

【讨论】：