Question

我有一些图像在一滴黎明（Bootstrap），现在我想要那个，当我点击一个下降黎明值时，图像应该改变。但是我的所有图像都具有相同的id，因为下降黎明值是动态变化的。

当我使用我的代码时，只有第一张图片是切换，即：如果我点击名称1或名称6，则仅命名1的图像切换，而另一个图像不显示。

这是我的代码和jS小提琴（http://jsfiddle.net/tutorialdrive/4n7xR/）

HTML

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Dawn<b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="javascript:void(0);" onclick="fnShowHide(0);"><img src = "http://cdn1.iconfinder.com/data/icons/silk2/tick.png" id="icon_green_tick"/><img src = "http://cdn3.iconfinder.com/data/icons/lynx/22x22/actions/dialog-close.png" style = "display:none;" id="icon_green_tick"/>&nbsp;&nbsp;&nbsp;name 1</a></li>
        <li><a href="javascript:void(0);" onclick="fnShowHide(1);"><img src = "http://cdn1.iconfinder.com/data/icons/silk2/tick.png" id="icon_green_tick"/><img src = "http://cdn3.iconfinder.com/data/icons/lynx/22x22/actions/dialog-close.png" style = "display:none;" id="icon_green_tick"/>&nbsp;&nbsp;&nbsp;name 2</a></li>
        <li><a href="javascript:void(0);" onclick="fnShowHide(2);"><img src = "http://cdn1.iconfinder.com/data/icons/silk2/tick.png" id="icon_green_tick"/><img src = "http://cdn3.iconfinder.com/data/icons/lynx/22x22/actions/dialog-close.png" style = "display:none;" id="icon_green_tick"/>&nbsp;&nbsp;&nbsp;name 3</a></li>
        <li><a href="javascript:void(0);" onclick="fnShowHide(3);"><img src = "http://cdn1.iconfinder.com/data/icons/silk2/tick.png" id="icon_green_tick"/><img src = "http://cdn3.iconfinder.com/data/icons/lynx/22x22/actions/dialog-close.png" style = "display:none;" id="icon_green_tick"/>&nbsp;&nbsp;&nbsp;name 4</a></li>
        <li><a href="javascript:void(0);" onclick="fnShowHide(4);"><img src = "http://cdn1.iconfinder.com/data/icons/silk2/tick.png" id="icon_green_tick"/><img src = "http://cdn3.iconfinder.com/data/icons/lynx/22x22/actions/dialog-close.png" style = "display:none;" id="icon_green_tick"/>&nbsp;&nbsp;&nbsp;name 5</a></li>
        <li><a href="javascript:void(0);" onclick="fnShowHide(5);"><img src = "http://cdn1.iconfinder.com/data/icons/silk2/tick.png" id="icon_green_tick"/><img src = "http://cdn3.iconfinder.com/data/icons/lynx/22x22/actions/dialog-close.png" style = "display:none;" id="icon_green_tick"/>&nbsp;&nbsp;&nbsp;name 6</a></li>
        <li><a href="javascript:void(0);" onclick="fnShowHide(6);"><img src = "http://cdn1.iconfinder.com/data/icons/silk2/tick.png" id="icon_green_tick"/><img src = "http://cdn3.iconfinder.com/data/icons/lynx/22x22/actions/dialog-close.png" style = "display:none;" id="icon_green_tick"/>&nbsp;&nbsp;&nbsp;name 6</a></li>
    </ul>
</li>

和我的Jquery代码

$(".dropdown-toggle").click(function () {
      $('#icon_green_tick').toggle();
});

<小时/> 有没有办法使用Jquery创建ID数组？

我不想一次切换所有图像。，切换我点击的图像，即：名称2，名称6等。

Answer 1

即使您应该更改ID，我认为这正是您要找的

$(".dropdown-menu li").click(function () {
    $(this).find('img').toggle();
});

http://jsfiddle.net/4n7xR/3/

Answer 2

正如您在Q评论中所述，重复ID 错误

的 WORKING DEMO

只需将id="icon_green_tick"替换为class="icon_green_tick"，并在jQ中使用相应的内容：

$(".dropdown-menu").on('click', 'li', function ( e ) { e.preventDefault(); fnShowHide( $(this).index() ); $(this).find('.icon_green_tick').toggle(); });

此外，您无需在HTML中使用内联JS来调用fnShowHide函数：

<li> <a href="#"> <img src = "http://cdn1.iconfinder.com/data/icons/silk2/tick.png" class="icon_green_tick"/> <img src = "http://cdn3.iconfinder.com/data/icons/lynx/22x22/actions/dialog-close.png" style = "display:none;" class="icon_green_tick"/>   name 1 </a> </li>

Answer 3

您一定要考虑更改HTML，以便您没有多个具有相同ID的元素

但是，如果您绝对无法修改HTML，则可以使用：

$('img[id="icon_green_tick"]').toggle();

使用与id匹配的"icon_green_tick"属性切换所有图片。

Answer 4

您应该为同一个类分配多个表单元素但不能使用相同的ID。执行您正在执行的操作，但使用类属性而不是 ID

Jquery切换具有相同ID的图像

4 个答案: