JavaScript显示/隐藏图片

Question

First I will give you my code

<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="">

That is my HTML code and this is my CSS

.hide {
  display: none;
}

.show {
  display: block
}

So my idea is when I click on the given list element - the corresponding picture to appear - and I succeed with that.

My problem is that I want when there are more than 2 pictures already opened, my code to automatically closes one of the already opened one's.

var simon = document.getElementById("simon")
var bruce = document.getElementById("bruce")
var ben = document.getElementById("ben")

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

function show() {
    let images = document.querySelectorAll("img")
    /* Array.prototype.forEach.call(images, function (x){
        x.className = "hide"
    })*/

    let id = this.attributes["data-img"].value
    let imgId = document.getElementById(id)

    if (imgId.className === "hide") {
        imgId.className = "show"
    } else {
        imgId.className = "hide"
    }

    //till here everything is OK
    let classes = document.querySelectorAll(".show")
    let full = []
    Array.prototype.forEach.call(classes, function (x) {
        full.push(x)
    })

    /*for(let i = 0; i<classes.length; i++){
    full.push(classes[i])

    }*/

    if (full.length > 2) {
        full[1].className = "hide"
        full.shift()
        console.log(full[0].id)
    }
}

And this code works(kind of) - but after a few successful rounds - it stops working - like i am not able to open the third picture and therefore close one of the existing one's

Answer 1

Ok, first of all your show() method works fine on my computer. The only change that I made is to get the img element and assign the eventListener inside the window.onload function to avoid the risk of get an undefined value.

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

Here is a simple solution since you already have a data attribute on your elements. This works for es5. You can do some fancier stuff in es6 if you want.

 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

You can try something like this:

Logic:

• Create a variable that will hold list of images that are visible.
• On click of a , fetch necessary element id from data attribute.
• Now check if this exists in current list. If not, add it to top.
• Now check if length is greater than 2 , pop last element and hide this image.

Note: I'm using unshift to add and pop to remove. This is to create a stack like structure. You can altternatively use .push to add and .splice(0,1) to remove as well.

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="">