JavaScriptが隠し絵を表示していません

私はこのJavaScriptメソッドに問題があります。私はちょうど私が1つのリンクをクリックすると、隠された画像を表示し、それをもう一度クリックすると隠すようにしたい。しかし、それは正しく動作していません。コードはそれをあなた自身でチェックし、このことで私を助けようとしています。宜しくお願いします。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属性を使用していました。

オペレータを使用して切り替えることができます。私はあなただけナマケモノナマケモノと-PICを使用して、いくつかのミスをしたと思う

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

_Glad to help！_ – 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

：

はこれを試してみてください。それはこのようにする必要があります：

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が隠し絵を表示していません

答えて

関連する問題