JQuery переключает изображения, имеющие одинаковый ID

У меня есть количество изображений в один рассвет (Bootstrap), Теперь я хочу, чтобы, когда я нажимаю на одно значение рассвета, изображения должны быть изменены. но у меня есть все изображения с одинаковым идентификатором, потому что падение значения рассвета динамически меняются.JQuery переключает изображения, имеющие одинаковый ID

Когда я использую свой код, только первое изображение переключается, i.e: если я нажму имя 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?

Я не хочу, чтобы переключить все изображение сразу, переключить noly изображение, где я нажимаю, то есть:. Имя 2, имя 6 и т.д.

источник

2013-05-04 Shivam Pandya

Дублированных Недопустимые идентификаторы. Вместо этого используйте класс. – 2013-05-04 12:33:56

Идентификаторы должны быть уникальными для каждой страницы контекста !!! Вот и все, используйте класс! –

Даже если вы должны изменить свои идентификаторы, я думаю, это то, что вы ищете

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

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

источник

2013-05-04 12:44:01 Spokey

, что мне нужно, спасибо @Spokey. :) –

Как уже было сказано в ваших 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(); 
});

Кроме того, вы не должны использовать встроенные JS внутри HTML для вызова 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 отвечаю первым, поэтому я проголосую за него, еще раз. –

Я знаю это, но Spokey тоже делает то же самое, поэтому .. и я знаю, что вы потеряли свое время, поэтому я проголосую за ваш ответ дважды. :) –

@ShivamPandya :) не нужно :) добавила больше информации к моему ответу, прислушиваясь к Споки, чтобы быть быстрее. Счастливое кодирование! –

Вы определенно должны рассмотреть возможность изменения вашего HTML, так что вы не имеете несколько элементов с таким же ID

Однако, если вы совершенно не можете изменить HTML, вы можете использовать:

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

для переключения всех изображений с помощью атрибута id, соответствующего "icon_green_tick".

источник

2013-05-04 12:34:04 techfoobar

@squint - Типо! Спасибо, что указали. – techfoobar

Я не хочу, чтобы переключать все изображения за раз, я хочу переключить изображение, где нажмите, i.e имя 2, имя 4 и т. Д. –

Вы должны назначить несколько элементов формы одному и тому же классу, но не одному и тому же идентификатору. Делайте то, что вы делаете, но используя класс атрибутов вместо идентификаторов

источник

2013-05-04 12:37:07 qwerty

JQuery переключает изображения, имеющие одинаковый ID

ответ

Смежные вопросы