使用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/