使用多个按钮切换隐藏/显示多个图像

Question

I have tree buttons, and a lot of pictures. I want if I click on Drums, then show me the images with drums and so on. I tried a lot of codes, but none of them worked. What is the problem???

This is my HTML:

 function ImgToggle(id) { document.getElementById('img').style.display = 'none'; document.getElementById(id).style.display = 'visible'; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="ImgToggle('drum')" style="margin: 75px 0 0 500px" class="myButton">Drums</button> <br> <button onclick="ImgToggle('piano')" style="margin-left:1000px" class="myButton">Pianos</button> <br> <button onclick="ImgToggle('guitar')" style="margin-left:175px" class="myButton">Guitars</button> <br> <img id="guitar" src="Style/Image/Fender1.jpg" style="width:100px;height:100px;padding-left:35px;"></img> <img id="guitar" src="Style/Image/Fender2.jpg" style="width:100px;height:100px;padding-left:35px;"></img> <img id="guitar" src="Style/Image/Gibson.jpg" style="width:100px;height:100px;padding-left:35px;"></img> <img id="guitar" src="Style/Image/Epiphone1.jpg" style="width:100px;height:100px;padding-left:35px;"></img> <img id="guitar" src="Style/Image/Epiphone2.jpg" style="width:100px;height:100px;padding-left:35px;"></img> <img id="piano" src="Style/Image/Casio.jpg" style="width:100px;height:100px;padding-left:35px;"></img> <img id="piano" src="Style/Image/Roland.jpg" style="width:100px;height:100px;padding-left:35px;"></img> <img id="piano" src="Style/Image/Roland2.jpg" style="width:100px;height:100px;padding-left:35px;"></img> <img id="drum" src="Style/Image/LudwigBasic.jpg" style="width:100px;height:100px;padding-left:35px;"></img> <img id="drum" src="Style/Image/LudwigFull.jpg" style="width:100px;height:100px;padding-left:35px;"></img> <img id="drum" src="Style/Image/PearlBasic.jpg" style="width:100px;height:100px;padding-left:35px;"></img> 

Answer 1

HTML does not allow duplicate IDs. Use classes to select the items instead.

Most browsers will only return the first match as IDs are stored in a fast lookup dictionary (eg with only one element per ID).

You did tag the question with jQuery so you may want to use something like this: https://jsfiddle.net/TrueBlueAussie/7c8zapnw/

$('.myButton').click(function(){
    var $target = $($(this).attr("target"));
    $('img').hide();
    $target.show();
});

And the HTML like this:

<button target=".drum" style="margin: 75px 0 0 500px" class="myButton">Drums</button>
<br>
<button target=".piano" style="margin-left:1000px" class="myButton">Pianos</button>
<br>
<button target=".guitar" style="margin-left:175px" class="myButton">Guitars</button>
<br>

<img class="guitar" src="Style/Image/Fender1.jpg" style="width:100px;height:100px;padding-left:35px;"/>
<img class="guitar" src="Style/Image/Fender2.jpg" style="width:100px;height:100px;padding-left:35px;"/>
<img class="guitar" src="Style/Image/Gibson.jpg" style="width:100px;height:100px;padding-left:35px;"/>
<img class="guitar" src="Style/Image/Epiphone1.jpg" style="width:100px;height:100px;padding-left:35px;"/>
<img class="guitar" src="Style/Image/Epiphone2.jpg" style="width:100px;height:100px;padding-left:35px;"/>
<img class="piano" src="Style/Image/Casio.jpg" style="width:100px;height:100px;padding-left:35px;"/>
<img class="piano" src="Style/Image/Roland.jpg" style="width:100px;height:100px;padding-left:35px;"/>
<img class="piano" src="Style/Image/Roland2.jpg" style="width:100px;height:100px;padding-left:35px;"/>
<img class="drum" src="Style/Image/LudwigBasic.jpg" style="width:100px;height:100px;padding-left:35px;"/>
<img class="drum" src="Style/Image/LudwigFull.jpg" style="width:100px;height:100px;padding-left:35px;"/>
<img class="drum" src="Style/Image/PearlBasic.jpg" style="width:100px;height:100px;padding-left:35px;"/>

Notes:

• You are attempting to get the img elements using an id of img which does not exist.
• IMG elements are meant to be self closing, so do not have an end tag </img>

Update:

jQuery/Javascript code has to follow the DOM elements it references (before the end of the body element), or (more usually) be wrapped in a DOM ready handler like this:

$(document).ready(function(){
    // Your code here
});

A shorter/smarter DOM ready handler is

$(function(){
    // Your code here
});

I say smarter as it support this version:

jQuery(function($){
    // Your code here using a locally scoped $!
});