выделить все divs с тем же классом

Question

У меня есть раздел с 15 членами команды (.member). Если я навещу над членом, скажем, команду дизайнеров, каждый член дизайна не получит непрозрачность .3. Что я до сих пор такова:

// ENGINEERS 
    $('.engineer').hover(function() { 
     $('.member').not($('.engineer')).stop().animate({ 
      opacity: .3 
     }, 300); 
    }, function() { 
     $('.member').stop().animate({ 
      opacity: 1 
     }); 
    }, 150); 

    // DESIGNERS 
    $('.designer').hover(function() { 
     $('.member').not($('.designer')).stop().animate({ 
      opacity: .3 
     }, 300); 
    }, function() { 
     $('.member').stop().animate({ 
      opacity: 1 
     }); 
    }, 150); 

    // PRODUCT 
    $('.product').hover(function() { 
     $('.member').not($('.product')).stop().animate({ 
      opacity: .3 
     }, 300); 
    }, function() { 
     $('.member').stop().animate({ 
      opacity: 1 
     }); 
    }, 150); 

Это работает, но для каждой категории вам нужно будет добавить новую функцию. Это, вероятно, вопрос о нобе, но могу ли я объединить эти функции? Я попробовал его с .each(), но я застрял, когда дело доходило до выбора всех остальных членов и угасания их.

Answer 1

Попробуйте с this так:

$('.product , .designer , .engineer').hover(function() { 
    $('.member').not($(this)).stop().animate({ 
     opacity: .3 
    }, 300); 
}, function() { 
    $('.member').stop().animate({ 
     opacity: 1 
    }); 
}, 150); 

Answer 2

Использование нескольких селекторов как этот Documentation

$('.engineer, .designer, .product').hover(function() { 
    $('.member').not($(this)).stop().animate({ 
     opacity: .3 
    }, 300); 
}, function() { 
    $('.member').stop().animate({ 
     opacity: 1 
    }); 
}, 150); 

Answer 3

Вы также можете попробовать, как

$('.product , .designer , .engineer').on('hover', function() { 
    $('.member').not($(this)).stop().animate({ 
    opacity: .3 
    }, 300); 
    }, function() { 
    $('.member').stop().animate({ 
    opacity: 1 
    }); 
}, 150); 

Answer 4

Небольшой редизайн в HTML может решить проблема

В разметке добавить дополнительный атрибут data-type, как показано ниже

<div class="member engineer" data-type="engineer">e4</div> 

затем

var members = $('.member').hover(function() { 
    members.filter('[data-type="' + $(this).data('type') + '"]').stop().animate({ 
     opacity: .3 
    }, 300); 
}, function() { 
    members.filter('[data-type="' + $(this).data('type') + '"]').stop().animate({ 
     opacity: 1 
    }); 
}, 150); 

Демо: Fiddle