Блог

У меня есть набор классов, которые используются несколько раз на странице, к которой я хотел бы добавить обработчики событий наведения курсора мыши, чтобы при наведении курсора на один экземпляр класса все экземпляры отображали эффект «свечения».

Я хотел бы избежать необходимости выписывать более 10 функций, поэтому я пытался заставить его работать, используя API множественного селектора jQuery. например

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

Помощь высоко ценится

Используйте метод 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 /