0

1 ドロップの夜明け (Bootstrap) に多数の画像があります。今、1 ドロップの夜明けの値をクリックすると、画像が変更される必要があります。しかし、ドロップドーンの値は動的に変更されるため、すべての画像が同じ 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

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();
});

fnShowHideさらに、HTML 内でインライン JS を使用して関数を呼び出す必要はありません。

<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

同じ ID を持つ要素が複数存在しないように、HTML を変更することを検討する必要があります。

ただし、HTML を絶対に変更できない場合は、次を使用できます。

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

id属性に一致するすべての画像を切り替えます"icon_green_tick"。

于 2013-05-04T12:34:04.567 に答える
1

複数のフォーム要素に同じクラスを割り当てる必要がありますが、同じ ID は割り当てないでください。あなたがしていることを行いますが、 IDの代わりにクラス属性を使用してください

于 2013-05-04T12:37:07.950 に答える