在html中显示图片
在html中显示图片
提问于 2018-04-02 01:03:44
我正在学习DOM并将Javascript合并到html文件中，我已经尝试过使用事件侦听器显示和隐藏图片的代码
..。然而，即使在Chrome控制台中没有检测到错误，图片似乎也不会出现。
注意:我只发布了相关的代码，省略了一些HTML标记
.hide{
display: none;
}
Facebook
Instagarm
Snapchat
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";
}
}
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-04-02 01:25:20
首先，你的问题是
而不是
，因此更改该属性将显示图像。
其次，我建议使用
classList
使用
和
..。您还可以使用
要让你的代码更小，就像这样：
.hide {
display: none;
}
Facebook
Instagarm
Snapchat
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'))
}
Stack Overflow用户
发布于 2018-04-02 01:25:30
我添加了
输入到您的
函数。我修改了你的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');
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49600501
复制相关文章
相似问题
腾讯云开发者
