Question

首先我会给你我的代码

while (count < integer)

这是我的HTML代码，这是我的CSS

<ul>
  <li><a data-img="simon-pics" id="simon" href="#">Simon Cowell</a></li>
  <li><a data-img="bruce-pics" id="bruce" href="#">Bruce Willis</a></li>
  <li><a data-img="ben-pics" id="ben" href="#">Ben Carson</a></li>
</ul>

<img class="hide" id="simon-pics" src="http://upload.wikimedia.org/wikipedia/commons/a/aa/Simon_Cowell_in_December_2011.jpg">
<img class="hide" id="bruce-pics" src="http://upload.wikimedia.org/wikipedia/commons/0/03/Bruce_Willis_by_Gage_Skidmore.jpg">
<img class="hide" id="ben-pics" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Ben_Carson_by_Skidmore_with_lighting_correction.jpg/220px-Ben_Carson_by_Skidmore_with_lighting_correction.jpg" alt="">

所以我的想法是当我点击给定的列表元素 - 出现相应的图片时 - 我成功了。

我的问题是，我想在已经打开超过2张图片时，我的代码会自动关闭已打开的图片之一。

.hide {
  display: none;
}

.show {
  display: block
}

此代码有效（有点） - 但经过几次成功的回合 - 它停止工作 - 就像我无法打开第三张图片因此关闭现有的一张

Answer 1

好的，首先你的show（）方法在我的电脑上正常工作。我做的唯一更改是获取img元素并在window.onload函数中分配eventListener，以避免获得未定义值的风险。

var simon;
var bruce;
var ben;

window.onload = function(){
simon = document.getElementById("simon")
bruce = document.getElementById("bruce")
ben = document.getElementById("ben")

simon.addEventListener("click", show)
bruce.addEventListener("click", show)
ben.addEventListener("click", show)
}

Answer 2

这是一个简单的解决方案，因为您的元素已经有了数据属性。这适用于es5。如果你愿意的话，你可以在es6中做一些更好的东西。

var elements = document.getElementsByClassName('imageHideShow');
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', show);
}

function show() {
  var ele = document.getElementById(this.dataset.img);

  if (ele.classList.contains('hide')) {
    var images = imagesShown();
    if (images.length === 2) {
      images[0].classList.remove('show');
      images[0].classList.add('hide');
    }
    ele.classList.remove('hide');
    ele.classList.add('show');
  } else {
    ele.classList.remove('show');
    ele.classList.add('hide');
  }
}

function imagesShown() {
  var images = document.getElementsByClassName('images');
  var returnValue = [];
  for (var i = 0; i < images.length; i++) {
    var image = images[i];
    if (image.classList.contains('show')) {
      returnValue.push(image);
    }
  }
  return returnValue;
}

.hide {
  display: none;
}

.show {
  display: block
}

<ul>
  <li><a data-img="simon-pics" class="imageHideShow" href="#">Simon Cowell</a></li>
  <li><a data-img="bruce-pics" class="imageHideShow" href="#">Bruce Willis</a></li>
  <li><a data-img="ben-pics" class="imageHideShow" href="#">Ben Carson</a></li>
</ul>

<img class="hide images" id="simon-pics" src="http://upload.wikimedia.org/wikipedia/commons/a/aa/Simon_Cowell_in_December_2011.jpg">
<img class="hide images" id="bruce-pics" src="http://upload.wikimedia.org/wikipedia/commons/0/03/Bruce_Willis_by_Gage_Skidmore.jpg">
<img class="hide images" id="ben-pics" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Ben_Carson_by_Skidmore_with_lighting_correction.jpg/220px-Ben_Carson_by_Skidmore_with_lighting_correction.jpg" alt="">

Answer 3

您可以尝试这样的事情：

逻辑：

创建一个包含可见图像列表的变量。
点击a，从数据属性中获取必要的元素ID。
现在检查当前列表中是否存在此信息。如果没有，请将其添加到顶部。
现在检查长度是否大于2，弹出最后一个元素并隐藏此图像。

注意：我正在使用unshift添加和pop删除。这是为了创建一个类似堆栈的结构。您也可以替代地使用.push添加，.splice(0,1)也可以删除。

<强> Sample Code

var visibleImages = [];

function registerEvents() {
  var els = document.querySelectorAll('li a');
  for (var i = 0; i < els.length; i++) {
    els[i].addEventListener('click', handleClick);
  }
}

function handleClick() {
  var imgId = this.getAttribute('data-img');
  addIDtoList(imgId)
  showImage(imgId)
  return false;
}

function addIDtoList(id) {
  if (visibleImages.indexOf(id) < 0)
    visibleImages.unshift(id);

  if (visibleImages.length > 2)
    hideImage(visibleImages.pop())
}

function showImage(id) {
  document.getElementById(id).classList.remove('hide');
}

function hideImage(id) {
  document.getElementById(id).classList.add('hide');
}

registerEvents();

.hide {
  display: none;
}

.show {
  display: block
}

img {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}

<ul>
  <li><a data-img="simon-pics" id="simon" href="#">Simon Cowell</a></li>
  <li><a data-img="bruce-pics" id="bruce" href="#">Bruce Willis</a></li>
  <li><a data-img="ben-pics" id="ben" href="#">Ben Carson</a></li>
</ul>

<img class="hide" id="simon-pics" src="http://upload.wikimedia.org/wikipedia/commons/a/aa/Simon_Cowell_in_December_2011.jpg">
<img class="hide" id="bruce-pics" src="http://upload.wikimedia.org/wikipedia/commons/0/03/Bruce_Willis_by_Gage_Skidmore.jpg">
<img class="hide" id="ben-pics" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Ben_Carson_by_Skidmore_with_lighting_correction.jpg/220px-Ben_Carson_by_Skidmore_with_lighting_correction.jpg" alt="">

JavaScript显示/隐藏图片

3 个答案:

逻辑：