javascript - Jquery切换具有相同ID的图像

Question

这个问题不太可能对任何 future 的访客有帮助；它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用， visit the help center 。

已关闭 10 年前。

我在一滴黎明(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 等。

Answer 1

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

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

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