Question

我正在学习DOM并整合javascriptin html文件，我尝试过使用事件列表器“点击”显示和隐藏图片的代码。但是，即使在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

首先，您发出的问题是<?php session_start(); print_r($_SESSION); ?>而不是src，因此请更改该属性并显示图片。

其次，我建议将classList与scr，add和remove一起使用。您还可以使用contains使代码更小，如下所示：

toggle

Answer 2

我在您的event功能中添加了show输入。我修改了你的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');
    }
}

用html显示图片

2 个答案: