Question

我正在尝试关闭电源按钮（实际上它是div），当我点击它时，它会改变它的外观。它看起来像一个中断器，所以我想更改页面的background-color，图标'断电'的颜色和按钮的border-style。

我从另一个网站上获取了这个功能，它在添加一个CSS属性方面做得很好，但我希望它能够继续下去。

document.getElementById('io').addEventListener('click', function () {
  if (this.classList.contains('poweroff')) {
  //  this.classList.remove('poweroff');
   this.classList.add('on');
  } else {
     this.classList.remove('on');
  }
});

我相信逻辑会像

x = x - 1

每当我点击按钮时，x需要从0转为1，从1转为0。

<body>
<div class="interruptor">
<div id="io" class="poweroff">
<i class="fa fa-power-off"></i>
</div>
</div>
  <script src="https://use.fontawesome.com/ddde7c70b6.js"></script>
  <script src="/js/logic.js" charset="utf-8"> </script>
  </body>

Answer 1

由于您在powerOff课程的基础上进行检查，因此您需要将其切换为此类

document.getElementById('io').addEventListener('click', function () {
if (this.classList.contains('poweroff')) {
  this.classList.remove('poweroff');
  this.classList.add('on');
} else {
  this.classList.add('poweroff');
  this.classList.remove('on');
}
});

不是检查if条件以及添加和删除类，而是使用像这样的切换

Read Here about toggle

document.getElementById('io').addEventListener('click', function () {
 this.classList.toggle('on');
});

Answer 2

您应该使用切换而不是添加和删除，如：

 document.getElementById('io').addEventListener('click', function () {
  if (this.classList.contains('poweroff')) {
     this.classList.toggle('poweroff');
     this.classList.toggle('on');
  } else {
    this.classList.toggle('on');
  }
});

这样它会在点击按钮时自动添加和删除类。

断电切换按钮/ div

2 个答案: