JavaScript not showing hidden picture
Question
I have a problem with this JavaScript method. I just want that when I click on one link, it shows the hidden picture, and when I click it one more time it hides it and so on. But it's not working properly. Here's the code check it by yourself and try to help me with this thing. Best regards.
<head>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<a data-img='sloth-pic' id='sloth' href='#'>Sloth</a>
<img class='hide' id='sloth-pic' src='https://static-secure.guim.co.uk/sys-images/Education/Pix/pictures/2013/1/17/1358446759827/A-three-toed-tree-sloth-h-008.jpg' style='width:304px;height:228px;'>
<script>
var sloth = document.getElementById("sloth");
var slothPic = document.getElementById("sloth");
sloth.addEventListener("click", function() {
if(slothPic.className === "hide") {
sloth.className = "";
} else if(sloth.className === ""){
slothPic.className = "hide";
}
});
</script>
</body>
5 answers
solution1
0 2016-03-23 19:40:52
Try this: https://jsfiddle.net/jorge182/cor14ze5/6/
sloth.addEventListener("click", function() {
if($('#sloth-pic').hasClass('hide')){
$('#sloth-pic').removeClass('hide')
}else{
$('#sloth-pic').addClass('hide')
}
})
solution2
0 ACCPTED 2016-03-23 19:43:50
You have used wrong id attributes in your JavaScript.
You can make it toggle using ternary operators.
Try this:
var sloth = document.getElementById("sloth"); var slothPic = document.getElementById("sloth-pic"); sloth.addEventListener("click", function() { slothPic.className = (slothPic.className == "hide") ? "" : "hide"; });
.hide { display: none; }
<a data-img='sloth-pic' id='sloth' href='#'>Sloth</a> <br> <img class='hide' id='sloth-pic' src='https://static-secure.guim.co.uk/sys-images/Education/Pix/pictures/2013/1/17/1358446759827/A-three-toed-tree-sloth-h-008.jpg' style='width:304px;height:228px;'>
solution3
0 2016-03-23 19:43:59
I think you just made some mistakes with the use of sloth and sloth-pic. It should be like this:
var sloth = document.getElementById("sloth");
var slothPic = document.getElementById("sloth-pic");
sloth.addEventListener("click", function() {
if(slothPic.className === "hide") {
slothPic.className = "";
} else if(sloth.className === ""){
slothPic.className = "hide";
}
});
You can find a working example here:
solution4
0 2016-03-23 19:46:11
You can do this with just a couple lines of Jquery, see fiddle https://jsfiddle.net/7oe5kh9L/55/
$("#sloth").click(function() {
$(".hide").toggleClass("show")
});
css
.hide {display: none;}
.show {display: inline;}
solution5
0 2016-03-23 19:50:14
If you plan to add more classes to the image use this code.
var sloth = document.getElementById("sloth"); var slothPic = document.getElementById("sloth-pic"); sloth.addEventListener("click", function() { toggleClass(slothPic, 'hide'); return false; }); function toggleClass(element, className){ if (!element || !className){ return; } var classString = element.className, nameIndex = classString.indexOf(className); if (nameIndex == -1) { classString += ' ' + className; } else { classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length); } element.className = classString; }
.hide { display: none; }
<a data-img='sloth-pic' id='sloth' href='#'>Sloth</a> <img class='hide' id='sloth-pic' src='http://www.miamammausalinux.org/wp-content/uploads/2016/03/stackoverflow2.png' style='width:304px;height:228px;'>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.