JavaScript顯示/隱藏圖片

Question

首先，我會給你我的代碼

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

那是我的HTML代碼，這是我的CSS

.hide {
  display: none;
}

.show {
  display: block
}

所以我的想法是，當我單擊給定的列表元素時-出現相應的圖片-然后我成功了。

我的問題是，當我要打開的圖片超過2張時，我的代碼自動關閉其中一張已經打開的圖片。

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)
    }
}

並且此代碼有效（有點）-但經過一輪成功的回合后-它停止了工作-就像我無法打開第三張圖片，因此關閉了現有圖片中的一張

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。
• 現在檢查當前列表中是否存在。 如果沒有，請將其添加到頂部。
• 現在檢查length是否大於2 ，彈出最后一個元素並隱藏該圖像。

注意：我正在使用unshift添加和pop以刪除。 這是為了創建類似堆棧的結構。 您也可以使用.push進行添加，並使用.splice(0,1)進行刪除。

樣例代碼

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