javascript - 按钮只显示图像一次？

Question

快速提问，

我是一个十足的 JS 菜鸟，所以我很难在互联网上找到正确的答案。所以我想我应该在这里问我的问题。

我写了这两个函数。

<script language="javascript" type="text/javascript">

function test() {
show_image("nummer/test.jpg", 120,160, "Firstname Lastname");
show_image("nummer/test2.jpg", 120,160, "Firstname2 Lastname2");
}

function show_image(src, width, height, alt) {
    var img = document.createElement("img");
    img.src = src;
    img.width = width;
    img.height = height;
    img.alt = alt;
    document.body.appendChild(img);
}

//edited piece of code:

function removeImages(){
            var images = document.getElementsByTagName("img");
            for (index = images.length - 1; index >= 0; index--) {
                images[index].parentNode.removeChild(images[index]);
            }
        }

</script>

<button onclick="test();">test</button>

这会完美地显示图像，但是当您继续单击该按钮时，它会不断生成图像。因此，如果您继续单击该按钮，我的页面将充满相同的图像。

我需要一种方法来限制这一点。我想让图像在第二次单击按钮或单击另一个按钮时再次消失。

谢谢!

编辑:

找到了我最初问题的解决方案，现在使用额外的函数来编辑 block 代码来替换图像。我知道我的代码确实效率不高，但它有效。

Answer 1

在OP评论澄清后进行编辑。想想你的show_image逻辑在做什么。您正在创建一个图像，并在每次单击按钮时附加它<​​/p>

现在，你真正想做什么？回答这个问题，你就有了答案。让我们创建一个故事:每次单击按钮时，我都想添加两个图像(如果它们不在屏幕上)，或者将其删除(如果它们在屏幕上)。

有很多方法可以做到这一点。如果你只是想在视觉上隐藏它们，你可以使用 CSS，你可以销毁并创建新图像，你可以附加/分离相同的图像，等等。但有一件事保持不变:你需要跟踪图像是否你正在创建的已经被创建了。 (这也有多种方式；您可以查询 dom，可以存储对项目的引用，可以使用 bool 开关等)。

下面是一个实例，它使用您的原始代码作为基础，但跟踪我们仅创建一次的图像引用，并通过每次单击按钮将它们附加到 dom 或从 dom 中删除它们:

// Define our images in the outer closure.
var img1, img2;

// Handle the button click
function toggleImages() {
  // If we haven't created our images, create and store them in
  // our variables.
  if (!img1) {
    img1 = create_image('http://lorempixel.com/120/160?a', 120, 160, "Firstname Lastname");
  }
  if (!img2) {
    img2 = create_image('http://lorempixel.com/120/160?b', 120, 160, "Firstname Lastname");
  }
  // Toggle our images
  toggle_image(img1);
  toggle_image(img2);
}

function create_image(src, width, height, alt) {
  var img = document.createElement('img');
  img.src = src;
  img.width = width;
  img.height = height;
  img.alt = alt;
  return img;
}

function toggle_image(img) {
  var parent = img.parentElement;
  // If our images are not attached to a parent, attach them.
  // Otherwise, remove them.
  if (!parent) {
    document.body.appendChild(img);
  } else {
    parent.removeChild(img);
  }
}

<button onclick="toggleImages()">Toggle some images!</button><br><br>