如何更緊湊地使用多個選擇器和事件編寫此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方法找出觸發該事件的元素-可以在任何事件回調中使用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', '');
});

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