javascript - 如何使用多个选择器和事件更紧凑地编写此 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

一次选择多个元素，并通过事件参数的 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;
}

然后，为什么不给所有具有这六个类的元素一个公共(public)类，比如img-luminosity？然后一切看起来像这样:

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

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