如何使用 ECMAScript 切换 2 个类答案

【问题标题】：How to toggle 2 classes with ECMAScript如何使用 ECMAScript 切换 2 个类
【发布时间】：2020-10-13 19:01:29
【问题描述】：

我有两个 CSS 类。一种淡入元素不透明度的class-A（使用CSS3关键帧）。另一个将不透明度淡化回 0 class-B（使用 CSS3 关键帧）。纯 ecmascript 有没有办法在这两个类之间切换？第一次点击时，class-A 加载。如果再次单击它，Class-B 会加载。如果你第三次点击它class-A 加载，等等......

以下是我对切换类的知识范围，与点击事件处理有关......

 var anchors = document.querySelectorAll('a');
 for (var i = 0, len = anchors.length; i < len; i++) {
    anchors[i].addEventListener('click', function (e) {
      e.preventDefault();
      if (this.classList.contains('my-trigger')) {
         document.querySelector('.what-i-am-fading-in-and-fading-out-on-clicks').classList.toggle('class-A');
      }
    }
 };

当我第一次点击我的链接my-trigger 时，很容易淡入元素。但我的最终目标是在元素上进行一个很好的淡出过程，当我的链接被第二次或第四次点击时，等等......我该如何利用这一点？

【问题讨论】：

你写的最后一件事让我很困惑，你是想要在不透明度 0 和 1 之间转换，还是要在切换类之前多次按下按钮？
抱歉有任何混淆。我想依靠每次点击来转换不透明度。单击时，如果不透明度当前为 0，则它应该变为 1（A 类）。如果不透明度为 1，那么它应该变为 0（B 类）。我敢肯定有很多方法可以做到这一点。出于某种原因，我的想法只是没有注册更多选项。
好吧，我想我可能得到了你要搜索的内容。

标签： ecmascript-6 ecmascript-5

【解决方案1】：

我不知道我是否理解正确，但是您可以添加一个 if 语句来查看不透明度是 0 还是 1，然后添加类，一旦添加了类，您就不需要查找它。

您可以将#test 的不透明度更改为 1 或 0，它会相应地更改。

let test = document.getElementById("test");
let but = document.getElementById("but");

but.onclick = ()=>{
    if(test.classList.contains("a")||test.classList.contains("b")){
        test.classList.toggle("a");
        test.classList.toggle("b"); 
    }else{
        
        if(window.getComputedStyle(test).getPropertyValue("opacity") == "0"){
          test.classList.add("b")
        }else{
          test.classList.add("a")
        }
        
    }

}

#test{
    width:100px;
    height:25px;
    background:black;
    opacity:1;
}

#but{
    width:50px;
    background: lightgrey;
    margin-top:20px;
}

.a{
    opacity:0 !important;
    transition:opacity 300ms;
}

.b{
    opacity:1 !important;
    transition:opacity 300ms;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grocery Bud</title>
    <!-- font-awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
    />
    <!-- styles -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="test"></div>
    <div id="but">Button</div>
</body>
<script src="app.js"></script>
</html>

【讨论】：

谢谢你的例子。这是我第一次通过您的示例真正了解 getComputedStyle。非常感谢，您的最终结果正是我正在寻找的。现在在我的代码中离线测试它......

【解决方案2】：

我认为这是使用 ES6 切换动画类的最简单方法 (classList.toggle)

let toggleElement = document.getElementById("toggleElement");
let but = document.getElementById("btn"); 
but.onclick = ()=>{ 
   toggleElement.classList.toggle('active');
}

 

#toggleElement{
    width:150px;
    height:25px;
    background:Red;
    opacity:1; 
    padding:10px;
}
 
.ele{
    opacity:0 !important;
    transition:opacity 300ms;
}

.ele.active{
    opacity:1 !important;
    transition:opacity 300ms;
}

 
 <button id="btn">Button</button>
 <div id="toggleElement" class="ele" > Toggle CSS Class </div>

【讨论】：