Question

我有树状按钮，还有很多照片。我想如果我点击鼓，然后用鼓等显示我的图像。我尝试了很多代码，但没有一个能够工作。有什么问题???

这是我的HTML：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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 ID来获取img元素。
IMG元素意味着自我关闭，因此没有结束标记</img>

更新

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

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

更短/更智能的DOM就绪处理程序

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

我说 smarter 因为它支持这个版本：

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

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

1 个答案:

说明：

更新