Question

这就是我期望我的代码所做的事情：

首先点击显示按钮，将图片1放在屏幕上。
第二次点击相同的按钮将图片2放在屏幕上同时显示图片 1仍然在屏幕上。
第三次点击相同的按钮将图片3放在屏幕上，而图片1 和图片2仍然在屏幕上。（现在所有三张照片都在屏幕）
第四次点击同一按钮，同时从屏幕上删除图片1 图2和图3仍然在屏幕上。
第五次点击同一按钮，同时从屏幕上删除图片2 图3仍在屏幕上。
第六次点击同一按钮，从屏幕上删除图片3。（现在全部从屏幕上删除了三张图片。

但不幸的是，它并没有完全符合我的要求。它不能一个一个地删除图片。（上面列表中的步骤4＆amp; 5＆amp; 6并不会发生）请帮我。提前谢谢。

这是代码：

<html>

<style>
body {
  text-align: center;
}
img.images {
  width: 200px;
  height: 100px;
  margin: 5px auto;
  display: none;
}
div#display {
  background-color: #000;
  padding: 5px 15px;
  cursor: pointer;
  color: #FFF;
  display: inline-block;
}
</style>

<body>
<div id="display">Display</div>
<img src="https://placekitten.com/400/200" class="images" id="image-1" />
<img src="https://placekitten.com/500/200" class="images" id="image-2" />
<img src="https://placekitten.com/600/200" class="images" id="image-3" />
</body>

<script>

(function() {
  var count = 0;
  document.getElementById('display').onclick = function() {
    var images = document.querySelectorAll('img.images');
    var image;
    if (count < images.length) {
      count++;
    } else {
      count = 1;
      for (var x = 0; x < images.length; x++) {
        image = images[x];
        image.style.display = 'none';
      }
   }
   image = document.getElementById('image-' + count);
   image.style.display = 'block';
 }
})();
</script>

</html>

Answer 1

试试这个，使用单独的变量显示索引并索引隐藏，以简化逻辑：

＆＃13;

var images = document.querySelectorAll('img.images');
var displayCount = 0;
var hideCount = 0;
document.getElementById('display').onclick = function() {
  if (displayCount < images.length) {
    images[displayCount].style.display = 'block';
    displayCount++;
  } else {
    images[hideCount].style.display = 'none';
    hideCount++;
    if (hideCount ===  images.length) {
      displayCount = 0;
      hideCount = 0;
    }
  }
}

＆＃13;

body {
  text-align: center;
}
img.images {
  width: 200px;
  height: 100px;
  margin: 5px auto;
  display: none;
}
div#display {
  background-color: #000;
  padding: 5px 15px;
  cursor: pointer;
  color: #FFF;
  display: inline-block;
}

＆＃13;

<div id="display">Display</div>
<img src="https://placekitten.com/400/200" class="images" id="image-1" />
<img src="https://placekitten.com/500/200" class="images" id="image-2" />
<img src="https://placekitten.com/600/200" class="images" id="image-3" />

＆＃13;

Answer 2

您可以使用visible的类和hidden元素的类，并检查可见的数量以及有多少人不决定是否购买或隐藏图像，

var images = document.querySelectorAll('.images');
var index = 0;

document.querySelector('#display').onclick = function() {

  if (document.querySelectorAll('.visible').length < images.length) { // if not all the images are visible
    images[index].classList.toggle('visible');
    index++;
  } else { // if not all the images are hidden
    images[index].classList.toggle('hidden');
    index++;
  }

  if (index >= images.length) index = 0;

}

body {
  text-align: center;
}

.images {
  width: 200px;
  height: 0px;
  margin: 5px auto;
  opacity: 0;
  display: block;
}

div#display {
  background-color: #000;
  padding: 5px 15px;
  cursor: pointer;
  color: #FFF;
  display: inline-block;
}

.visible {
  opacity: 1;
  height: 100px;
}

.hidden {
  opacity: 0;
  height: 0;
}

img {
  transition: all .2s linear;
}

<div id="display">Display</div>
<img src="https://placekitten.com/400/200" class="images" id="image-1" />
<img src="https://placekitten.com/500/200" class="images" id="image-2" />
<img src="https://placekitten.com/600/200" class="images" id="image-3" />

我怎样才能逐张删除图片

2 个答案: