在html中显示图片答案

【问题标题】：Displaying pictures in html在html中显示图片
【发布时间】：2018-04-01 17:03:43
【问题描述】：

我正在学习 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>

【问题讨论】：

标签： javascript html dom dom-events

【解决方案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>

【讨论】：

【解决方案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');
    }
}

【讨论】：