0

我有一个页面，其中包含动态数量的按钮，所有按钮的 ID 为“删除按钮”。我的 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应该是唯一的（只有一个）。请改用 .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 将此视为页面上确实只有一个 id，因此一旦找到匹配 id 选择器的更多元素，它将停止在 dom 中查找。如果您想通过相同的调用将逻辑应用于多个元素，则必须为这些元素分配一个类，因为它们将被多次使用。jquery 知道这一点，并将找到与您的类选择器匹配的所有元素。

于 2013-03-26T17:15:22.523 回答