jQuery仅适用于单个按钮，并非全部实例

我有一个带有动态数量按钮的页面，所有这些页面都带有“delete-button”标识。我的jQuery工作得很好，但只在第一个“＃delete-button”实例上。jQuery仅适用于单个按钮，并非全部实例

$(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的按钮？

来源

2013-03-26 user2167958

您只定位一个按钮，因为ID是唯一的，您只能拥有一个带有该ID的按钮。 – adeneo 2013-03-26 17:13:21

如果存在多个具有相同ID的元素，则id选择器将仅获得第一个元素。你应该使用类名来代替。例如

$('.delete_button').mouseleave(...

来源

2013-03-26 17:11:47 Marcus

标识应该是唯一的（唯一的一个）。改为使用.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-26 17:12:11 kayz1

这两个答案都是正确的，但要详细说明这一点。有效的html规定你不能在给定页面的多个元素上拥有相同的id。 Id的意思是一个元素的唯一标识符。 Jquery把这看作是页面上只能有一个id，所以它会停止查看dom中是否有更多与id选择器匹配的元素。如果你想用相同的调用将你的逻辑应用到多个元素上，你必须为这些元素指定一个类，因为它们要多次使用。 jquery知道这一点，并会找到所有匹配你的类选择器的元素。

来源

2013-03-26 17:15:22 iAmClownShoe

jQuery仅适用于单个按钮，并非全部实例

回答

相关问题