Fatal编程技术网
  • javascript/
  • Javascript 如何更简洁地使用多个选择器和事件编写jQuery代码？

Javascript 如何更简洁地使用多个选择器和事件编写jQuery代码？

javascript jquery html

Javascript 如何更简洁地使用多个选择器和事件编写jQuery代码？,javascript,jquery,html,Javascript,Jquery,Html,我使用一些JavaScript在悬停某些元素时更改一些样式。因为这种情况在我的登陆页面上发生了六次，所以我复制了六次并更改了相应的类 但对我来说，它看起来真的很凌乱，我想知道是否有一种更简洁优雅的写作方式？我不是说JavaScript压缩 $(function() { // 1. Main $('.main1').hover(function() { $('.main1').css('color', '#0000d2'); $('.main1 img').css('mix

我使用一些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', '');
  });
});
可以使用一个简单的循环：

 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', '');
   });
 }
可以使用一个简单的循环：

 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', '');
   });
 }
要访问当前元素，可以使用$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', '');
});
要访问当前元素，可以使用$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', '');
});
只需将所有选择器组合在一起，并将其用于悬停元素，然后查找其图像

然后，因为只有一个函数参数激发enter和leave的hover，所以您可以简单地检查类型，并使用相同的回调函数相应地调整值

$('.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' : '');
});
只需将所有选择器组合在一起，并将其用于悬停元素，然后查找其图像

然后，因为只有一个函数参数激发enter和leave的hover，所以您可以简单地检查类型，并使用相同的回调函数相应地调整值

$('.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' : '');
});
一次选择多个元素，找出哪个元素使用事件参数的target属性触发了事件，或者 — 任何一种方式都可以在任何事件回调中使用：

$(".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中完成所有事情：

.main 1:悬停， .main 2:悬停， .main 3:悬停， .sub1：悬停， .sub2:悬停， .sub3:悬停{ 颜色：0000d2； } .main1：悬停图像， .main 2：悬停img， .main 3：悬停img， .sub1：悬停图像， .sub2：悬停式img， .sub3：悬停img{ 混合模式：亮度； } 然后，为什么不给所有具有这六个类的元素一个公共类，比如img光度？然后一切都会像这样：

.img亮度：悬停{ 颜色：0000d2； } .img亮度：悬停img{ 混合模式：亮度； }
一次选择多个元素，找出哪个元素使用事件参数的target属性触发了事件，或者 — 任何一种方式都可以在任何事件回调中使用：

$(".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中完成所有事情：

.main 1:悬停， .main 2:悬停， .main 3:悬停， .sub1：悬停， .sub2:悬停， .sub3:悬停{ 颜色：0000d2； } 梅因：哈弗， .main 2：悬停img， .main 3：悬停img， .sub1：悬停图像， .sub2：悬停式img， .sub3：悬停img{ 混合模式：亮度； } 然后，为什么不给所有具有这六个类的元素一个公共类，比如img光度？然后一切都会像这样：

.img亮度：悬停{ 颜色：0000d2； } .img亮度：悬停img{ 混合模式：亮度； }
我使用ES6语法作为示例。我希望它会：

常量style=el={}，参数={}=>{ const{colors，mixBlend}=参数； 常数{base，baseImg}=el； $base.css'color'，`${colors}`； $baseImg.css'mix-blend-mode'，`${mixBlend}`； } 常数el={ 基数：$'.main1'， baseImg:$'.main1img' } 常量styleHover={ 颜色：“0000d2”， mixBlend:“亮度” } 常数mouseLeave={ 颜色：， 混合混合： } 常数悬停==>{ styleel，styleHover； } 常数mouseleave==>{ styleel，mouseLeave； } $function{ //1.主要 $'.main1'.hover=>hover，=>mouseleave}；
}; 我使用ES6语法作为示例。我希望它会：

常量style=el={}，参数={}=>{ const{colors，mixBlend}=参数； 常数{base，baseImg}=el； $base.css'color'，`${colors}`； $baseImg.css'mix-blend-mode'，`${mixBlend}`； } 常数el={ 基数：$'.main1'， baseImg:$'.main1img' } 常量styleHover={ 颜色：“0000d2”， mixBlend:“亮度” } 常数mouseLeave={ 颜色：， 混合混合： } 常数悬停==>{ styleel，styleHover； } 常数mouseleave==>{ styleel，mouseLeave； } $function{ //1.主要 $'.main1'.hover=>hover，=>mouseleave}；
};要访问当前元素，您可以使用$this。您也可以共享一些HTML吗？是否有多个元素共享相同的类名？现在我们来看看如何使用查找表和循环。这不需要大量的代码。我投票将这个问题作为离题题结束，因为它属于@SethMcClaine。请随意推荐CR上的OP帖子，但在将来，请不要将代码审查作为结束问题的理由。评估请求并使用一个理由，比如过于宽泛，主要是基于意见的，等等。然后你可以向OP提到，如果是，它可以发布在代码审查上。请参阅“在访问当前元素时不应执行的操作”部分。您可以使用$this。您也可以共享一些HTML吗？是否有多个元素共享相同的类名？现在我们来看看如何使用查找表和循环。这不需要大量的代码。我投票决定结束这一切
问题是离题的，因为它属于@SethMcClaine。请随意推荐CR上的OP帖子，但在将来，请不要使用代码审查作为结束问题的理由。评估请求并使用一个理由，比如过于宽泛，主要是基于意见的，等等。然后你可以向OP提到，如果是，它可以发布在代码审查上。请参阅“无需继续在jQuery对象中包装s时不应执行的操作”一节。您可以在循环的顶部执行一次，然后使用.findimg获取img子项您还可以将其简化为$.main1、.main2、.hoverfunction{…}，不需要数组或loop@mhodges这不一定是同一件事。你觉得怎么样？非常感谢你的回答。我马上试试你的解决办法。非常感谢你！无需继续在jQuery对象中包装。您可以在循环的顶部执行一次，然后使用.findimg获取img子项您还可以将其简化为$.main1、.main2、.hoverfunction{…}，不需要数组或loop@mhodges这不一定是同一件事。你觉得怎么样？非常感谢你的回答。我马上试试你的解决办法。非常感谢你！肯定是最好的回答，非常感谢你的回答。我对js不是很在行，之前有一个纯css解决方案，它使用header.linkwrapper:hover>.imgwrapper-img一次改变不同的样式。但由于布局原因，我需要使用基于网格的构造，现在我不能再使用像.linkwrapper这样的封闭元素了。因此，我寻找了一个基于js的解决方案。肯定是最好的回答。非常感谢你的回答。我对js不是很在行，之前有一个纯css解决方案，它使用header.linkwrapper:hover>.imgwrapper-img一次改变不同的样式。但由于布局原因，我需要使用基于网格的构造，现在我不能再使用像.linkwrapper这样的封闭元素了。因此，我寻找了一个基于js的解决方案。OP没有添加标签，所以明智的做法是不使用es-6语法，除非它被请求。。。也许OP需要支持不支持它的浏览器…OP没有添加标记，所以除非请求，否则最好不要使用es-6语法。。。也许OP需要支持不支持它的浏览器…非常感谢您的回答。在多次搜索stackoverflow并查看不同的方法后，我尝试了类似的方法，但没有一种方法适用于我的案例。我马上试试你的解决办法。非常感谢你！非常感谢你的回答。在多次搜索stackoverflow并查看不同的方法后，我尝试了类似的方法，但没有一种方法适用于我的案例。我马上试试你的解决办法。非常感谢你！非常感谢你的回答。在多次搜索stackoverflow并查看不同的方法后，我尝试了类似的方法，但没有一种方法适用于我的案例。我会马上把你的解决方案拿出来。非常感谢你！非常感谢你的回答。在多次搜索stackoverflow并查看不同的方法后，我尝试了类似的方法，但没有一种方法适用于我的案例。我会马上把你的解决方案拿出来。非常感谢你！