使用多個按鈕切換隱藏/顯示多個圖像

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 $!
});