ボタンを隠す/表示する

-1

他の2つを隠すボタンを各画像に作成しようとしています。たとえば、左の画像のボタンをクリックすると、左の画像が表示され、中央の画像と右の画像が非表示になります。 HTMLは同じ、何か提案を維持する必要がありますか？ボタンを隠す/表示する

divの controls内のボタンをクリックすると

<div id="works"> 
    <figure data-artist="left"> 
      <img src="david.jpg" alt> 
     <figcaption>left image</figcaption> 
    </figure> 

    <figure data-artist="middle"> 
     <img src="david-plaster.jpg" alt> 
     <figcaption>middle image</figcaption> 
    </figure> 

    <figure data-artist="right"> 
     <img src="florence-cathedral.jpg" alt> 
     <figcaption>Right image</figcaption> 
    </figure> 
</div> 

<div id="controls"> 

</div> 

<script> 
    var hideShowButton = document.getElementById("hideShowButton"); 

    hideShowButton.onclick = function() { 
     var allImages = { left: "left", center: "middle", right: "right" }; 

     if(document.getElementById("michelangelo").style.visibility == 'visible') { 
      for (var image in allImages) { 
       document.getElementById(allImages[image]).style.visibility = 'hidden'; 
      } 
      document.getElementById("hideShowButton").innerHTML = "Hide"; 
     } 
    } 
</script>

出典

2017-04-11 Anonymous

'のdocument.getElementById（allImages [画像を助けます]） 'は、要素を取得しません - a）このメソッドは文字列を要求します、b）単一の要素のみを返します、そしてc）allImagesオブジェクトに含まれるIDを持つ画像がないので、メソッドがこのような任意のオブジェクトを受け入れるなら、何も見つけられません。 document.querySelectorAllを使用してみて、画像がすべて共有するクラスを与えてください。次に、そのクラスの要素を非表示にして、必要な特定のものを再度表示することができます。 https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll – ADyson

元の質問を削除しないでください。そうしないと、将来他の人に役立つことはありません。 – Buddy

、彼は機能showImage()を実行します。
この関数は、Figure要素をすべて取得し、表示をnoneに設定します。

次に、図形と同じ機能をトリガーする要素の属性data-artistを取得し、その要素と同じ属性のdata-artistを持つFigureのブロックとして表示スタイルを追加します。

function showImage(event){ 
 
    var objClass = event.getAttribute("data-artist"); 
 
    var elems = document.getElementsByTagName("figure"); 
 
    for (var i=0;i<elems.length;i++) 
 
    elems[i].style.display = 'none'; 
 
    
 
    var element = document.querySelector('figure[data-artist='+objClass+']'); 
 
    element.style.display = 'block'; 
 
    
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div id="works"> 
 
<figure data-artist="left"> 
 
    <img src="david.jpg" alt> 
 
    <figcaption>left image</figcaption> 
 
</figure> 
 

 
<figure data-artist="middle"> 
 
    <img src="david-plaster.jpg" alt> 
 
    <figcaption>middle image</figcaption> 
 
</figure> 
 

 
<figure data-artist="right"> 
 
    <img src="florence-cathedral.jpg" alt> 
 
    <figcaption>Right image</figcaption> 
 
</figure> 
 
</div> 
 

 
<div id="controls"> 
 
    <button data-artist="left" onclick="showImage(this);">left</button> 
 
    <button data-artist="middle" onclick="showImage(this);">center</button> 
 
    <button data-artist="right" onclick="showImage(this);">right</button> 
 
</div> 
 
</body> 
 
</html>

出典

2017-04-11 16:03:39

jqueryを使用しているhesのように見えない – Craicerjack

なぜこのコードがOPに役立つのかの説明を追加してください。これにより、今後の視聴者からの回答が得られます。詳細については、[このメタ質問とその回答]（http://meta.stackoverflow.com/q/256359/215552）を参照してください。 –

申し訳ありませんが、私は決して再びそのようなことを私の人生ではしません。 –

-1

<div id="works"> 
<figure data-artist="left"> 
<img src="david.jpg" id="image1" alt> 
<figcaption>left image</figcaption> 
<button onclick="hideshow('1');">Choose</button> 
</figure> 

<figure data-artist="middle"> 
<img src="david-plaster.jpg" id="image2" alt> 
<figcaption>middle image</figcaption> 
<button onclick="hideshow('2');">Choose</button> 
</figure> 

<figure data-artist="right"> 
<img src="florence-cathedral.jpg" id="image3" alt> 
<figcaption>Right image</figcaption> 
<button onclick="hideshow('3');">Choose</button> 
</figure> 
</div> 

<div id="controls"> 

</div> 
<script> 

function hideshow(buttonpressed) { 
     var img1 = document.getElementById("image1"); 
     var img2 = document.getElementById("image2"); 
     var img3 = document.getElementById("image3"); 

    if(buttonpressed==1) { 
      img1.style.visibility == 'visible'; 
      img2.style.visibility == 'hidden'; 
      img3.style.visibility == 'hidden'; 
     } 

    if(buttonpressed==2) { 
      img1.style.visibility == 'hidden'; 
      img2.style.visibility == 'visible'; 
      img3.style.visibility == 'hidden'; 
    } 


    if(buttonpressed==3) { 
      img1.style.visibility == 'hidden'; 
      img2.style.visibility == 'hidden'; 
      img3.style.visibility == 'visible'; 
    } 

} 

</script>

多くのボタン（いない3）が存在することになる場合は、アプローチはこの

希望とは異なるだろうこれは

出典

2017-04-11 16:15:53

答えて

関連する問題