javascript - 单击后按钮属性恢复正常

Question

我正在做一个小元素，我在其中实现了一个带有悬停和 CSS 属性的按钮。

但问题是在点击它之后，它会恢复到正常的基本按钮。即它失去了所有的 CSS 属性。

我试图查看 JavaScript 是否是导致此更改的原因，但未能找到其背后的原因。

HTML

<button class="btn6">1 MB</button>

CSS 按钮:

.btn6, .btn6:link, .btn6:visited {
  padding: 15px;
  border: 3px solid #333;
  color: #333;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 3px;
  transition: all .2s ease-in-out;
}
.btn6:hover, .btn6:link:hover, .btn6:visited:hover {
  background: #333;
  border: 3px solid #333;
  color: #fefefe;
  border-radius: 50px;
}

由于 Javascript 很长，我提供代码笔的链接 ( https://codepen.io/imgkl/pen/XwNyKZ )

点击后按钮应保留 CSS 属性。

Answer 1

发生这种情况的原因:您在单击时从按钮中删除了所有类(还有 btn6)...这就是为什么在单击之后所有类看起来都没有样式。

要解决这个问题，请更改这部分代码:

btns.forEach (btn => {
  btn.className = '';
});

ev.target.className = 'choice';

为此:

btns.forEach (btn => {
  btn.classList.remove('choice');
});

ev.target.classList.add('choice');

供引用 - 这是代码笔:Link to pen