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

Question

我有树形按钮，还有很多图片。 我想要单击鼓，然后向我展示带鼓的图像等等。 我尝试了很多代码，但是没有一个起作用。 问题是什么？？？

这是我的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不允许重复的ID。 使用类来选择项目。

由于ID存储在快速查找字典中（例如，每个ID仅包含一个元素），因此大多数浏览器只会返回第一个匹配项。

您确实使用jQuery标记了问题，所以您可能想要使用类似以下的内容： https : //jsfiddle.net/TrueBlueAussie/7c8zapnw/

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

和这样的HTML：

<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;"/>

笔记：

• 您正在尝试使用不存在的img标识获取img元素。
• IMG元素是自动闭合的，因此没有结束标签</img>

更新：

jQuery / Javascript代码必须遵循它引用的DOM元素（在body元素的末尾之前），或者（通常）包装在DOM就绪处理程序中，如下所示：

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

较短/更智能的DOM ready处理程序是

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

我说的更好，因为它支持此版本：

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