时间戳

首页 > 解决方案 > 单击它们后使编号图像消失的最简单方法是什么？

javascript - 单击它们后使编号图像消失的最简单方法是什么？

问题描述

我有一些非常基本的代码，屏幕上有数字 1-10（标题为 1.jpg、2.jpg 等）的图像。生成一个随机数，如果点击正确数字的图像，则会显示提示。如果单击了不正确的数字，我希望图像消失。我知道如何为每个图像使用单独的函数来实现这一点，但是在一个函数中完成这一切的最佳方法是什么？

标签： javascripthtmlcss

解决方案

首先：您的一些代码片段将有助于在此处给出合格的答案。

假设这样的内容是您的实际 html 结构（注意：如果您的标签中有一个id，您可以省略一些步骤，例如）：img<img src="1.jpg" id="1">

<div id="image-wrapper">
   <img src="1.jpg">
   <img src="2.jpg">
   <img src="3.jpg">
   ...
</div>

使用纯 JavaScript，您可以执行以下操作：

var rnd = ... //produce your random number
document.querySelectorAll("img").forEach(img => {
   img.onclick = () => {
      let src = img.src;
      src = src.split("/"); //get an array of the source of your image
      src = src[src.length - 1]; //get the last position inside the array (resembling the filename)
      src = src.split("."); //split the filename by '.' (to separate filename and -type in the next step)
      src = src[0];
      src = parseInt(src); //make the extracted src and the random number you produced comparable by converting to int
      if(rnd !== src) {
         img.parentElement.removeChild(img);
      } else {
         alert("foo"); //your prompt
      }
   };
});

说明：使用该方法document.querySelectorAll，您可以选择一个 html 节点数组（使用与 CSS 相同的选择器）。array.forEach您现在可以通过使用（请参阅mdn以获得进一步说明）来迭代此数组。img现在，您可以在每个上注册一个onclick-method。鉴于您确实只是src将img用作鉴别器，您必须在下一步中从 src 中提取实际文件名。

在将您的随机数与文件名进行比较后，您使用了一个事实，即您正在处理一个实际的 DOM-Object 此处（在 forEach 循环中）：您通过Node.parentElement( mdn ) 获取父节点，您可以在其中给出命令删除它的一个孩子（在我们的例子中是我们当前的图像）。

我希望对您有所帮助 - 如需更多帮助，请提供有关该问题的更多信息:)

推荐阅读