jquery切换图像具有相同的ID

我有一个图像的数量在一个下降黎明（引导），现在我想，当我点击一个下降黎明价值时，图像应该改变。但是我具有相同ID的所有图像，因为drop dawn值会动态变化。jquery切换图像具有相同的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(); 
});

有什么方法来创建数组ID使用JQuery的？

我不想立刻切换所有图像，切换noly形象在我点击，即：2名，6名等

来源

2013-05-04 Shivam Pandya

复制ID无效。改为使用班级。 – 2013-05-04 12:33:56

对于每个上下文页面，Ids必须是唯一的！就是这样，用class代替！ – 2013-05-04 12:34:01

即使你应该改变你的ID，我认为这是你在找什么

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

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

来源

2013-05-04 12:44:01 Spokey

，我需要什么，谢谢@Spokey。 :) – 2013-05-04 12:46:15

正如已经在您的问与答评论说，重复的ID是坏

WORKING DEMO

只需使用class="icon_green_tick"取代id="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"/>&nbsp;&nbsp;&nbsp;name 1 
    </a> 
</li>

来源

2013-05-04 12:33:51

谢谢@roXon，但Spokey首先回答，所以我给他投了票，再次感谢。 – 2013-05-04 12:48:16

我知道，但Spokey也做同样的事情，所以.. 我知道你失去了你的时间，所以我把你的答案提高一倍。 :) – 2013-05-04 12:51:54

@ShivamPandya :)无需:)添加更多信息给我的答案，为Spokey更快的荣誉。快乐的编码！ – 2013-05-04 12:56:55

你绝对应该考虑改变你的HTML，这样你就不必用相同的多个元素ID

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

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

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

来源

2013-05-04 12:34:04 techfoobar

@squint - 错字！谢谢你指出。 – techfoobar 2013-05-04 12:36:29

我不想一次切换所有图像，我想切换图像，点击，即名称2，名称4等。 – 2013-05-04 12:40:43

你应该分配多个表单元素相同的类，但不是相同的ID。你在做什么，但使用类属性，而不是IDS

来源

2013-05-04 12:37:07 qwerty

jquery切换图像具有相同的ID

回答

相关问题