使用jQuery時，如何選擇一個類的所有實例，當使用多個類選擇器

Question

我有一組類在一個頁面上多次使用，我想添加懸停事件處理程序，以便當該類的一個實例被懸停，所有實例都將顯示「發光」效果。

我想避免寫出10多個函數，所以我一直試圖讓它使用jQuery的多選擇器API工作。例如

$(".r1,.r2,.r3,.r4,.r5,.r6,.r7,.r8,.r9,.r10").hover(
    function() { 
     $(this).addClass("glow"); //All of r1, or r2 etc 
    }, 
    function() { 
     $(this).removeClass("glow"); //All of r1, or r2 etc 
    } 
); 

我的問題是，我無法弄清楚如何選擇類的所有實例，而並非只是：$（本）。

幫助非常感謝

Answer 1

使用filter()^[docs]方法來篩選基於接收該事件的元素的className財產整個集合。

var r_classes = $(".r1,.r2,.r3,.r4,.r5,.r6,.r7,.r8,.r9,.r10"), 
    hovered; 

r_classes.hover(
    function() { 
     hovered = r_classes.filter('.' + this.className).addClass("glow"); 
    }, 
    function() { 
     hovered.removeClass("glow"); //All of r1, or r2 etc 
    } 
); 

當過濾時，將過濾後的集合分配給hovered變量。這是因爲你不需要重複過濾器。

此外，假定r1,r2,...rn類是初始分配給該元素的唯一一個類（在添加glow類之前）。

---

編輯：

直播示例：http://jsfiddle.net/pvQes/1/