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);

它有效，但对于每个类别，您都必须添加新功能。这可能是一个noob问题，但我可以统一这些功能吗？我用.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

突出显示所有具有相同类别的div

4 个答案: