Question

我目前正在尝试在图像之间切换。我有几张彼此叠放的图像，最初所有图像都有一个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;
}

另外，如果我的for循环有问题，我尝试将所有图像添加到数组中并对其进行遍历，但也没有成功。

Answer 1

一些要解决的问题：

number在使用前未定义
您正在计算6次，只需要发生一次。
您正在呼叫toggle，但没有告诉它是应该关闭还是打开（在IE11中不起作用）
您总是只使用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>

似乎无法在循环中应用classList.toggle

1 个答案: