Не похоже, чтобы применить classList.toggle в цикле

голоса
0

В настоящее время я пытаюсь переключаться между изображениями. У меня есть несколько изображений уложенных друг на друга , и первоначально все они имеют display:none;. Я хочу , чтобы, когда я нажимаю кнопку , случайное изображение появится на экране. Выбранный каждый снимок с querySelectorAll, сделал генератор случайных чисел , и моя цель состояла в том, чтобы перебирать их, и номер , который выбрал в тот момент означало бы , какая картинка я собирался сделать видимыми. Проблема заключается в том, что в консоли я вижу , что он пытается переключить класс , но ничего не происходит

Код для ссылки:

var button = document.querySelector(.btn-roll);

button.addEventListener(click, function() {
  var images = document.querySelectorAll(.dice);
  for (var i = 0; i < 6; i++) {
  var number =  Math.floor((Math.random() * 6) + 0);
  }

  for(var i = 0; i < images.length; i++) {
    images[number].classList.toggle(Appear);
  }
})

CSS для справки:

.dice {
  position: absolute;
  left: 50%;
  top: 178px;
  transform: translateX(-50%);
  height: 100px;
  box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10);
  display: none;
}

.Appear {
  display:block;
}

Кроме того, если что-то не так с моей цикл я попробовал, добавив все изображения в массив и итерацию через него, а также, без успеха, а также.

Задан 27/11/2018 в 15:11
источник пользователем
На других языках...                            


1 ответов

голоса
0

Несколько вещей, чтобы исправить:

  • number не определен до того, как используется
  • Вы подсчитываете номер 6 раз, только должно произойти один раз.
  • Вы звоните , toggleно не говорит, если это необходимо переключить или выключить (Не работает в IE11)
  • Вы всегда просто toggeling numberи не весь список.

var button = document.querySelector(".btn-roll");

button.addEventListener("click", function() {
  var images = document.querySelectorAll(".dice");
  var number =  Math.floor((Math.random() * 6) + 0);

  for(var i = 0; i < images.length; i++) {
    images[i].classList.toggle("Appear", i === number);
  }
})
.dice {
  position: absolute;
  left: 50%;
  top: 178px;
  transform: translateX(-50%);
  height: 100px;
  box-shadow: 0px 10px 60px rgba(0, 0, 0, 0.10);
  display: none;
}

.Appear {
  display:block;
}
<button class="btn-roll">Roll</button>
<div class="dice">1</div>
<div class="dice">2</div>
<div class="dice">3</div>
<div class="dice">4</div>
<div class="dice">5</div>
<div class="dice">6</div>

Ответил 27/11/2018 в 15:21
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more