Переключить много классов

Question

так что спасибо вам за все, что мне помогают. Вы заставили меня задуматься над тем, что я делал, поэтому я коротко изложил свой код так, как мне показалось, было бы хорошо, но до того, как код стал длинным, но работал сейчас, короткий, но не работает с первой панелью, даже если ошибок нет. цикл? Таким образом, 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 повернутся, чтобы показать другое изображение, чем при нажатии панели один. И так один для остальных панелей. Итак, я начинаю и создаю функцию для первой панели. Это работает, но есть ли способ сделать это проще? Вот код:

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. Спасибо

Answer 1

Другой подход может заключаться в том, чтобы просто сосредоточиться на результатах, поэтому мы можем удалить первые селекторы для каждой панели изображений, поскольку они сразу же перезаписываются.

Это оставляет вторые запросы для каждого селектора. Это можно упростить, объединив несколько селекторов внутри queryselectorAll для элементов с переключаемым классом.

function guessWho(){

    document.querySelector('.image-1-panel').classList.toggle('active');
    document.querySelector('.image-2-panel').classList.toggle('notactive');
    document.querySelectorAll('.image-3-panel, .image-5-panel, .image-7-panel, .image-7-panel').forEach((f)=>{f.classList.toggle('notactive');})
    document.querySelector('.image-4-panel').classList.toggle('notactive1');
    document.querySelector('.image-6-panel').classList.toggle('notactive2');
}

guessWho();

.allpanels > div {display: inline-block;border:solid 1px black;height:50px;width:50px;margin:8px;}
.active { background-color:red;}
.notactive { background-color:lightsteelblue;}
.notactive1 { background-color:green;}
.notactive2 { background-color:orange;}

<div class="allpanels">
<div class="image-1-panel">1</div>
<div class="image-2-panel">2</div>
<div class="image-3-panel">3</div>
<div class="image-4-panel">4</div>
<div class="image-5-panel">5</div>
<div class="image-6-panel">6</div>
<div class="image-7-panel">7</div>
</div>

Answer 2

Вы можете создать список новых состояний, которые вы хотите изменить ваши классы. В этом случае у вас есть объект, который выглядит так: {А: ложь, я: ""}

где a - активен ли он, а i - ваш инкремент пост-класса, например "notactive2".

Затем вы создаете вложенный цикл, в котором дважды перебираете каждое число, и проверяете положение в вашем списке состояний, чтобы определить, какие вещи будут добавлены в ваш базовый «активный» класс.

 var activeClassesList = [{a:false,i:""},{a:true,i:""},{a:true,i:""},{a:false,i:""},{a:true,i:""},{a:false,i:""},{a:true,i:""},{a:false,i:"1"},{a:true,i:""},{a:false,i:""},{a:true,i:""},{a:false,i:"2"},{a:true,i:""},{a:false,i:""},{a:true,i:""},{a:false,i:"3"}];

var imageClassPrefix = ".image-";
var imageClassPostfix = "-panel";
var start =1;
var base = 8;
for (var i=0;i<2;i++)
 {
   var count = 1;
   for (var j=start;j<(start+base);j++) {

      var modifier = activeClassesList[j-1];
      var cls = (modifier.a ? "" : "not") + "active" + modifier.i;
      document.querySelector(imageClassPrefix + String(count) +  imageClassPostfix).classList.toggle(cls);
      count++;

   }
   start = start + base;
   
 }
 

Answer 3

Учитывая, что querySelector принимает строку, вы можете построить эту строку внутри цикла и использовать итератор внутри строки. Что-то вроде

for(i = 1; i <= 8; i++) {
    document.querySelector('.image-' + i + '-panel').classList.toggle('notactive');
}

переключит класс notactive для всего, что имеет image-x-panel.

Answer 4

Раствор 1

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

Раствор 2

Добавьте некоторый класс CSS к вашему HTML, как CLASSNAME

И используйте попробуйте это

document.querySelector(`CLASSNAME`).classList.toggle('notactive');
document.querySelector(`CLASSNAME`).classList.toggle('active');

Answer 5

Используйте цикл.

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