0

動的な数のボタンがあり、すべてIDが「delete-button」のページがあります。私のjQueryはうまく機能しますが、「＃delete-button」の最初のインスタンスでのみ機能します。

$(document).ready(function(){
    $('#delete_button').mouseenter(function() {
        $(this).closest('tr').css('border-left', 'solid');
        $(this).closest('tr').css('border-left-width', '2px');
        $(this).closest('tr').css('border-left-color', '#dd3333');
    });
    $('#delete_button').mouseleave(function() {
        $(this).closest('tr').css('border-style', 'none');
    });
});

これを引き起こしているのはどのような風邪ですか？同じIDのボタンを複数持つことはできませんか？

4

3 に答える 3

3

同じIDを持つ要素が複数ある場合、IDセレクターは最初の要素のみを取得します。代わりにクラス名を使用する必要があります。例えば 

$('.delete_button').mouseleave(...
于 2013-03-26T17:11:47.807 に答える
2

IDは一意である必要があります（1つのみ）。代わりに.delete_buttonクラスを使用してください。

    <button id="delete_button1" class="delete_button"></button>
    <button id="delete_button2" class="delete_button"></button>
    ....
    <button id="delete_buttonN" class="delete_button"></button>

    $(function(){
     $('body').on('mouseenter', '.delete_button', function() {
        $(this).closest('tr').css({
                                  'border-left' : 'solid',
                                  'border-left-width' : '2px',
                                  'border-left-color' : '#dd3333'
                                 });
     });

     $('body').on('mouseleave', '.delete_button', function() {
        $(this).closest('tr').css('border-style', 'none');
     });
    });
于 2013-03-26T17:12:11.777 に答える
0

どちらの答えも正しいですが、それについて詳しく説明するのはほんの少しです。有効なhtmlは、特定のページの複数の要素に同じIDを設定できないことを示しています。IDは、要素の一意の識別子であることが意図されています。Jqueryはこれを、ページ上に本当に1つのIDしか存在できないかのように処理するため、IDセレクターが見つかると、それ以上の要素を探してdomを探すのをやめます。同じ呼び出しで複数の要素にロジックを適用する場合は、それらの要素が複数回使用されることを意図しているため、それらの要素にクラスを割り当てる必要があります。jqueryはこれを認識しており、クラスセレクターに一致するすべての要素を検索します。

于 2013-03-26T17:15:22.523 に答える