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僅適用於單個按鈕，並非全部實例

回答

相關問題