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

然后，为什么不将具有这六个类的所有元素赋予 common 类，例如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', '');
});

Answer 4

只需将所有选择器组合在一起，并将this用于悬停元素，并将find()用于其图像

然后，因为只有一个函数参数的鼠标悬停会同时进入和离开，所以您只需使用相同的回调函数检查类型并相应地调整值即可

$('.main1,.main2, .main3, .sub1').hover(function(event) {
    var isEnter = event.type ==='mouseenter';
    $(this).css('color', isEnter ? '#0000d2' : '')
           .find('img').css('mix-blend-mode', isEnter ? 'luminosity' : '');
});

Answer 5

我使用您的示例ES6语法。我希望它会是:)

const style = (el = {}, parameters = {}) => {
  const { colors, mixBlend } = parameters;
  const {base, baseImg} = el;
  
  $(base).css('color', `${colors}`);
  $(baseImg).css('mix-blend-mode', `${mixBlend}`);
}

const el = {
  base: $('.main1'),
  baseImg: $('.main1 img')
}
const styleHover = {
  colors: '#0000d2',
  mixBlend: 'luminosity'
}

const mouseLeave = {
  colors: '',
  mixBlend: ''
}

const hover = () => {
  style(el, styleHover);
}
const mouseleave = () => {
  style(el, mouseLeave);
}


$(function() {
   	// 1. Main
   	$('.main1').hover(() => hover), () => mouseleave()});
   });

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

5 个答案: