制作一个在随机位置显示或隐藏多个图像的按钮答案

【问题标题】：Making a button that shows or hides multiple images in a random location制作一个在随机位置显示或隐藏多个图像的按钮
【发布时间】：2021-07-02 09:39:02
【问题描述】：

我在为一个画廊制作网站时遇到问题。我为可以显示和隐藏多个图像的按钮编写了代码。我打算让按钮可以随机放置几个图像。我编写的代码只能用于一张图片。

请告诉我用作按钮以将多个图像放置在随机位置的代码。

用户可以通过按下按钮隐藏图像。
当用户再次按下按钮时，它会将图像放置在另一个随机位置。

const btn = document.querySelector("button");
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
const box = document.getElementById("color");

btn.addEventListener("click", () => {
  let randY = Math.floor((Math.random() * height) + 1);
  let randX = Math.floor((Math.random() * width) + 1);
  box.style.top = randY + "px";
  box.style.right = randX + "px";
});


function showhide() {
  var x = document.querySelectorAll("#color");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].style.display === "block") {
      x[i].style.display = "none";
    } else {
      x[i].style.display =
        "block";
    }
  }
}

body {
  height: 500px;
}

.random {
  position: absolute;
}

<button onclick="showhide()" value="Zeige Features" id="button">click me</button>

<img id="color" style="display: none;" class="random" src="http://lorempixel.com/200/200/">

<img id="color" style="display: none;" class="random" src="http://lorempixel.com/200/200/">

【问题讨论】：

必须是唯一的，所以如果你选择document.getElementById()，你总是只能得到一个元素，如果你需要有多个元素，请为此使用类。
您已经包含了 JQuery，但没有在代码中使用任何 JQuery。所以我删除了它。
首先感谢您的评论。你能更详细地评论吗？我不是编码专家，所以我需要一个编码示例的评论。

标签： css button random

【解决方案1】：

使用querySelectorAll 时，您在showHide() 中做的事情是正确的。然后您就可以获取所有图像了。
您永远不应该拥有具有相同ids 的元素。它们应该是独一无二的。所以querySelectorAll("#color") 有效，但现在你应该这样做。改为在“img.random”上执行 querySelector。
getElementById 只返回一个元素，不像querySelectorAll。所以你需要使用querySelectorAll('img.random')。

这可能超出您的知识范围，我认为您不应该在 HTML 中添加图像，而是在 javascript 代码中。

a) 将所有图像路径添加到数组中：['https://image.com/image.png', ...]

b) 添加单个 img 元素。 <img id="template" class="random">

c) 在 javascript 代码中，为数组中的每个图像路径克隆该元素。您可以为此使用cloneNode。

d) 随机化每个元素的每个位置，就像您现在所做的那样。

e) 通过appendChild 将每个元素添加到 DOM。有一个你附加到的唯一 div。确保每次第二次点击按钮时清除它。

f) 解决沿途的所有错误。 :P

【讨论】：

【解决方案2】：

问题

这里的主要问题是您使用getElementById 查询#color

const box = document.getElementById("color");

因为getElementById 只返回一个元素（但您的 DOM 中有两个）并且样式仅适用于一个元素。这就是为什么您会看到只有一个元素随机移动，而另一个元素只是停留在同一个地方。

这里要注意一下，id 在 DOM 中应该是 unique。

实际上，您在 showhide 函数中使用了正确的 API 来完成作业

var x = document.querySelectorAll("#color");

修复：

要解决此问题，您需要按类名查询所有图像（如旁注中所建议的那样，不要使用 id 来完成这项工作）

const boxes = document.querySelectorAll(".random");

现在我们有了一个节点列表，就像您在 showhide 函数中所做的那样，我们需要循环遍历它，我在这里没有使用 for 循环，而是使用 forEach 循环，它只是更简洁和对 JS 的现代补充

// Since boxes are not array, we need to covert it to array so we can use that handy `.forEach` here:
Array.from(boxes).forEach(box => {
  box.style.top = Math.floor((Math.random() * height) + 1) + "px";
  box.style.right = Math.floor((Math.random() * width) + 1) + "px";
})

现在，这应该可以解决您的问题。请参阅下面的完整代码。

const btn = document.querySelector("button");
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
const boxes = document.querySelectorAll(".random");

btn.addEventListener("click", () => {
  Array.from(boxes).forEach(box => {
    box.style.top = Math.floor((Math.random() * height) + 1) + "px";
    box.style.right = Math.floor((Math.random() * width) + 1) + "px";
  })
});

function showhide() {
  var x = document.querySelectorAll(".random");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].style.display === "block") {
      x[i].style.display = "none";
    } else {
      x[i].style.display =
        "block";
    }
  }
}

body {
  height: 500px;
}

.random {
  position: absolute;
}

<button onclick="showhide()" value="Zeige Features" id="button">click me</button>

<img id="color" style="display: none;" class="random" src="http://lorempixel.com/200/200/">
<img id="color" style="display: none;" class="random" src="http://lorempixel.com/100/100/">

【讨论】：