JavaScript未显示隐藏图片

我对此JavaScript方法有问题。我只是希望当我点击一个链接时，它会显示隐藏的图片，当我再次单击它时，它会隐藏它，等等。但它不能正常工作。这是代码检查它自己并尝试帮助我处理这件事情。最好的祝福。JavaScript未显示隐藏图片

<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>

来源

2016-03-23 user6106183

作为一个方面说明我会建议你看看jQuery的，因为这将让这样的事情容易得多。 – Oisin

你已经在你的JavaScript中使用错误id属性。

您可以使用三元操作符进行切换。

试试这个：

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;'>

来源

2016-03-23 19:43:50 Rayon

是啊明显愚蠢的错误哈哈，这只是我今晚累了。谢谢btw的回应和答案！ – user6106183

_很高兴帮助！_ – Rayon

试试这个：https://jsfiddle.net/jorge182/cor14ze5/6/

sloth.addEventListener("click", function() { 

      if($('#sloth-pic').hasClass('hide')){ 

       $('#sloth-pic').removeClass('hide') 
      }else{ 
       $('#sloth-pic').addClass('hide') 
      } 
     })

来源

2016-03-23 19:40:52

我在这个例子中使用jQuery。 –

'toggleClass'如何？问题中没有标记'jQuery'！ – Rayon

是的，在命名id属性中显然很愚蠢的错误哈哈，这只是我今晚累了的一件事。谢谢btw的答案！我在jQuery中学到了一些新东西。这很棒。 – user6106183

我觉得你只是犯了一些错误的使用懒惰和懒惰-PIC的。它应该是这样的：

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"; 
    } 
});

您可以在这里找到工作的例子：

https://jsfiddle.net/nLn23r5j/

来源

2016-03-23 19:43:59 kogelnikp

是啊明显的愚蠢的错误哈哈，这只是我今晚累了。谢谢btw的回应和答案！ – user6106183

你可以只的jQuery几行做到这一点，看到小提琴https://jsfiddle.net/7oe5kh9L/55/

$("#sloth").click(function() { 
    $(".hide").toggleClass("show") 
    });

css

.hide {display: none;} 

.show {display: inline;}

来源

2016-03-23 19:46:11

这也有帮助。谢谢。 – user6106183

如果您打算为图像添加更多类，请使用此代码。

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;'>

来源

2016-03-23 19:50:14

这真棒，它将会对我的进一步工作有很大的帮助。谢谢，我很感激！ – user6106183

JavaScript未显示隐藏图片

回答

相关问题