如何使用几个选择器和事件更紧凑地编写此jQuery代码？

Question

当悬停某些元素时，我使用一些JavaScript来更改一些样式。由于这种情况在我的登录页上发生了大约六次，所以我复制了六次，并更改了相应的类。

但对我来说，它似乎真的很混乱，我想知道是否有更紧凑和优雅的写作方式？我不是在谈论JavaScript压缩。

$(function() {
  // 1. Main
  $('.main1').hover(function() {
    $('.main1').css('color', '#0000d2');
    $('.main1 img').css('mix-blend-mode', 'luminosity');
  }, function() {
    $('.main1').css('color', '');
    $('.main1 img').css('mix-blend-mode', '');
  });

  // 2. Main
  $('.main2').hover(function() {
    $('.main2').css('color', '#0000d2');
    $('.main2 img').css('mix-blend-mode', 'luminosity');
  }, function() {
    $('.main2').css('color', '');
    $('.main2 img').css('mix-blend-mode', '');
  });

  // 3. Main
  $('.main3').hover(function() {
    $('.main3').css('color', '#0000d2');
    $('.main3 img').css('mix-blend-mode', 'luminosity');
  }, function() {
    $('.main3').css('color', '');
    $('.main3 img').css('mix-blend-mode', '');
  });

  // 1. Sub
  $('.sub1').hover(function() {
    $('.sub1').css('color', '#0000d2');
    $('.sub1 img').css('mix-blend-mode', 'luminosity');
  }, function() {
    $('.sub1').css('color', '');
    $('.sub1 img').css('mix-blend-mode', '');
  });

  // 2. Sub
  $('.sub2').hover(function() {
    $('.sub2').css('color', '#0000d2');
    $('.sub2 img').css('mix-blend-mode', 'luminosity');
  }, function() {
    $('.sub2').css('color', '');
    $('.sub2 img').css('mix-blend-mode', '');
  });

  // 3. Sub
  $('.sub3').hover(function() {
    $('.sub3').css('color', '#0000d2');
    $('.sub3 img').css('mix-blend-mode', 'luminosity');
  }, function() {
    $('.sub3').css('color', '');
    $('.sub3 img').css('mix-blend-mode', '');
  });
});

Answer 1

一次选择多个元素，并使用event参数的target属性或this - 找出哪个元素触发了事件，这两种方法都可以在任何事件回调中使用：

$(".main1, .main2, .main3, .sub1, .sub2, .sub3").hover(function(e){
  // This function uses `e.target`
  $(e.target).css("color", "#0000d2")
    .find("img").css("mix-blend-mode", "luminosity");
}, function(){
  // This function uses `this`
  $(this).css("color", "")
    .find("img").css("mix-blend-mode", "");
});

不过，更好的方法是在CSS中做所有的事情：

.main1:hover,
.main2:hover,
.main3:hover,
.sub1:hover,
.sub2:hover,
.sub3:hover{
  color: #0000d2;
}

.main1:hover img,
.main2:hover img,
.main3:hover img,
.sub1:hover img,
.sub2:hover img,
.sub3:hover img{
  mix-blend-mode: luminosity;
}

然后，为什么不给具有这六个类的所有元素一个公共类，就像img-luminosity一样？那么一切都会是这样的：

.img-luminosity:hover{
  color: #0000d2;
}

.img-luminosity:hover img{
  mix-blend-mode: luminosity;
}

Answer 2

可以使用一个简单的循环：

 for(const s of [".main1", ".main2", ".main3", ".sub1", ".sub2", ".sub3"]) {
   $(s).hover(function() {
    $(s).css('color', '#0000d2');
    $(s + ' img').css('mix-blend-mode', 'luminosity');
   }, function() {
     $(s).css('color', '');
     $(s + ' img').css('mix-blend-mode', '');
   });
 }

Answer 3

要访问当前元素，可以使用$(this)。

$('.main1, .main2, .main3, .sub1, .sub2, .sub3').hover(function() {
    $(this).css('color', '#0000d2');
    $(this).find('img').css('mix-blend-mode', 'luminosity');
}, function() {
    $(this).css('color', '');
    $(this).find('img').css('mix-blend-mode', '');
});

您还可以向每个类添加一个类，并使用这个简单的类

$('.hoverable').hover(function() {
    $(this).css('color', '#0000d2');
    $(this).find('img').css('mix-blend-mode', 'luminosity');
}, function() {
    $(this).css('color', '');
    $(this).find('img').css('mix-blend-mode', '');
});