时间戳

首页 > 解决方案 > 切换多个类

javascript - 切换多个类

问题描述

所以感谢你们对我的帮助。你让我想到了我在做什么，所以我将我的代码缩短为我认为好的代码，但在代码很长但现在可以工作之前，虽然没有错误，但代码很短但不适用于第一个面板。所以也许是环形？所以html是这样的：

<div class="container">
   <div class="down sound">
       <img id="batman" class="image-1-panel active" src="flash.svg">
       <img class="image-2-panel notactive" src="http://cdn.playbuzz.com/cdn/3c096341-2a6c-4ae6-bb76-3973445cfbcf/6b938520-4962-403a-9ce3-7bf298918cad.jpg">
       <p class="image-3-panel notactive">Bane</p>
       <p>Joker</p>
       <p>Alfred</p>
   </div>

然后重复 3 个类似的容器。在活动和非活动的 css 上，我有：

.notactive{
      visibility: hidden;
      position: relative;
  }

  .active{
      position: absolute;

  }

在js中：

document.querySelector('#batman').addEventListener('click', batman);
function batman(){
    document.querySelector('.image-1-panel').classList.toggle('.notactive');
    document.querySelector('.image-1-panel').classList.toggle('.active');
    document.querySelector('.image-2-panel').classList.toggle('.active');
    document.querySelector('.image-2-panel').classList.toggle('.notactive');
}

但是什么也没有发生……我还有一个 for 循环声音，它仍然可以正常工作，但是面板没有移动。有人可以在这里分享一些光吗？我在一个循环中思考并按照函数尝试它，但也没有那么清楚地工作我错过了一些东西，也许是我试图捕捉的错误元素？上面我有我的问题，没有编辑，你可以理解我的意思。谢谢你的帮助

我有 4 个面板。在每个面板中，将有 3 个图像/文本一个接一个。因此，当我按下面板 1 时，面板 2,3 和 4 将转动以显示图像。按下面板 2，面板 1、3 和 4 将转动显示不同的图像，然后按下面板 1。其余的面板也是如此。所以我开始为第一个面板创建一个函数。它有效，但有什么方法可以让它变得简单吗？这是代码：

function guessWho(){
    document.querySelector('.image-1-panel').classList.toggle('notactive');
    document.querySelector('.image-1-panel').classList.toggle('active');
    document.querySelector('.image-2-panel').classList.toggle('active');
    document.querySelector('.image-2-panel').classList.toggle('notactive');
    document.querySelector('.image-3-panel').classList.toggle('active');
    document.querySelector('.image-3-panel').classList.toggle('notactive');
    document.querySelector('.image-4-panel').classList.toggle('active');
    document.querySelector('.image-4-panel').classList.toggle('notactive1');
    document.querySelector('.image-5-panel').classList.toggle('active');
    document.querySelector('.image-5-panel').classList.toggle('notactive');
    document.querySelector('.image-6-panel').classList.toggle('active');
    document.querySelector('.image-6-panel').classList.toggle('notactive2');
    document.querySelector('.image-7-panel').classList.toggle('active');
    document.querySelector('.image-7-panel').classList.toggle('notactive');
    document.querySelector('.image-8-panel').classList.toggle('active');
    document.querySelector('.image-8-panel').classList.toggle('notactive3');
}

有什么办法可以把这个简单吗？我不想使用任何框架，所以它必须是纯 js。谢谢

标签： javascripttoggle

解决方案

使用循环。

for (var i = 0; i <= 8; i++) {
    document.querySelector(`.image-${i}-panel`).classList.toggle('notactive');
    document.querySelector(`.image-${i}-panel`).classList.toggle('active');
}

推荐阅读