0

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

当我使用我的代码时，只有第一个图像是切换的，即：如果我单击名称 1 或名称 6，则只有名称 1 的图像切换并且另一个图像不显示。

这是我的代码和 jS Fiddle ( 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 等。

4

4 回答 4

2

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

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

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

于 2013-05-04T12:44:01.207 回答
1

You should assign multiple form elements the same class but not the same id. Do what you are doing but using class attributes instead of ids

于 2013-05-04T12:37:07.950 回答
1

正如您在 Q 评论中已经说过的那样，重复 ID不好

WORKING DEMO

只需在 jQ 中替换并相应地使用id="icon_green_tick"：class="icon_green_tick"

$(".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"/>&nbsp;&nbsp;&nbsp;name 1
   </a>
</li>
于 2013-05-04T12:33:51.700 回答
1

您绝对应该考虑更改您的 HTML，以便您不会有多个具有相同 ID 的元素

但是，如果您绝对不能修改 HTML，您可以使用：

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

切换id属性匹配的所有图像"icon_green_tick"。

于 2013-05-04T12:34:04.567 回答