在html中顯示圖片

Question

我正在學習 DOM 並將 Javascript 合並到 html 文件中，我嘗試過使用事件偵聽器click顯示和隱藏圖片的代碼。 但是，即使在 Chrome 控制台中未檢測到錯誤，圖片似乎也不會出現。

注意：我只發布了相關的代碼，我省略了一些 HTML 標簽

 <style> .hide{ display: none; } </style> <main> <ul> <li><a data-img="face" id="facebook" href="#"> Facebook </a></li> <li><a data-img="insta" id="instagram" href="#"> Instagarm </a></li> <li><a data-img="snap" id="snapchat" href="#"> Snapchat </a></li> </ul> <img class="hide" id="face" scr="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png"> <img class="hide" id="insta" scr="http://bikecleanse.com/wp-content/uploads/2016/10/Insta-Logo.png" > <img class="hide" id="snap" scr="https://icon-icons.com/icons2/686/PNG/512/snapchat_snap_chat_icon_logo_social_app_red_icon-icons.com_61225.png"> </main> <script type="text/javascript"> var face = document.getElementById('facebook'); var insta = document.getElementById('instagram'); var snap = document.getElementById('snapchat'); face.addEventListener("click", show); insta.addEventListener("click", show); snap.addEventListener("click", show); function show() { var picId = this.attributes["data-img"].value; var pic = document.getElementById(picId); if(pic.className === "hide"){ pic.className=""; } else { pic.className= "hide"; } } </script>

Answer 1

首先，您的問題是它是src而不是scr ，因此更改該屬性並顯示圖像。

其次，我建議將classList與add 、 remove和contains 。 您還可以使用toggle使您的代碼更小，如下所示：

 <style> .hide { display: none; } </style> <main> <ul> <li> <a data-img="face" id="facebook" href="#"> Facebook </a> </li> <li> <a data-img="insta" id="instagram" href="#"> Instagarm </a> </li> <li> <a data-img="snap" id="snapchat" href="#"> Snapchat </a> </li> </ul> <img class="hide" id="face" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png"> <img class="hide" id="insta" src="http://bikecleanse.com/wp-content/uploads/2016/10/Insta-Logo.png"> <img class="hide" id="snap" src="https://icon-icons.com/icons2/686/PNG/512/snapchat_snap_chat_icon_logo_social_app_red_icon-icons.com_61225.png"> </main> <script type="text/javascript"> var face = document.getElementById('facebook'); var insta = document.getElementById('instagram'); var snap = document.getElementById('snapchat'); face.addEventListener("click", show); insta.addEventListener("click", show); snap.addEventListener("click", show); function show() { var picId = this.attributes["data-img"].value; var pic = document.getElementById(picId); pic.classList.toggle('hide', !pic.classList.contains('hide')) } </script>

Answer 2

我將event輸入添加到您的show函數中。 我修改了你的顯示功能，如下所示。 檢查這是否適合您：

function show(e) {

    let picId = e.target.dataset.img;

    let pic = document.getElementById(picId);

    if(pic.classList.contains('hide'){
        pic.classList.remove('hide');
    }
    else{
        pic.classList.add('hide');
    }
}