Question

我有一组在页面上多次使用的类，我想添加悬停事件处理程序，这样当一个类的一个实例悬停时，所有实例都会显示一个“发光”效果。

我想避免写出10多个函数，所以我一直在尝试使用jQuery的多选择器API来实现它。 e.g。

$(".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
    }
);

我的问题是我无法弄清楚如何选择类的所有实例，而不仅仅是：$（this）。

非常感谢

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/

使用jQuery，当使用多类选择器时，如何选择类的所有实例

1 个答案: