Javascript 是否可以组合jquery的各个功能？

我有很多按钮，当每个按钮悬停时，会有一些不透明度的变化

代码相似，小的不同是

$（'.button-a'）、$（'.button-b'）、$（'.button-c'）、$（'.button-d'）

，是否可以组合jquery每个函数？这样我就可以缩短我的代码？谢谢

您可以使用

---

我看不出这些函数有什么不同，包括不透明度。但您可以在jQuery调用中对选择器进行分组，如：

$(function() {
  $('.button-a,.button-b,.button-c,.button-d').hover(function () {
        $('.button-title', this).animate({ opacity: 0.6 }, 200);
  });
});

如果您最初没有选择器，但希望稍后将其添加到链中，也可以使用。e、 g

$('.button-a,.button-b,.button-c,.button-d')...

是的，用这个

您所需要的只是：

$('.button-a,.buttcon-b,.button-c,.button-d');

正如我在评论中所说，没有必要使用

$('.button-a, .button-b, .button-c, .button-d').each(function() {
  $(this).hover(function() {
    $('.button-title', this).animate({ opacity: 0.6 }, 200);
  });
});

一直如此。您已经在“就绪”处理程序中获得了所有内容。

两个简化：

$(function() {
  // code code code ...
});

您也可以缩短待命通话时间：

var fn = function() {
   $(this).hover(
       function () {
          $('.button-title', this).animate({ opacity: 0.6 }, 200);
       }
   });
});

jQuery(document).ready(function() {
    $('.button-a').each(fn);
    $('.button-b').each(fn);
    $('.button-c').each(fn);
    $('.button-d').each(fn);
});

您可以合并选择器：

var fn = function() {
   $(this).hover(
       function () {
          $('.button-title', this).animate({ opacity: 0.6 }, 200);
       }
   });
});

$(function() {
    $('.button-a').each(fn);
    $('.button-b').each(fn);
    $('.button-c').each(fn);
    $('.button-d').each(fn);
});

现在，您实际上不需要

。每个
，正如
一样。悬停
将自动应用于选择器给定的每个元素：

var fn = function() {
   $(this).hover(
       function () {
          $('.button-title', this).animate({ opacity: 0.6 }, 200);
       }
   });
});

$(function() {
   $('.button-a, .button-b, .button-c, .button-d').each(fn);
});

你挑吧
 首先，您不需要在jQuery“就绪”设置中包装每一段代码——您已经在“就绪”处理程序中获得了所有内容！
var fn = function() {
   $(this).hover(
       function () {
          $('.button-title', this).animate({ opacity: 0.6 }, 200);
       }
   });
});

$(function() {
    $('.button-a').each(fn);
    $('.button-b').each(fn);
    $('.button-c').each(fn);
    $('.button-d').each(fn);
});

var fn = function() {
   $(this).hover(
       function () {
          $('.button-title', this).animate({ opacity: 0.6 }, 200);
       }
   });
});

$(function() {
   $('.button-a, .button-b, .button-c, .button-d').each(fn);
});

$(function() {
   $('.button-a, .button-b, .button-c, .button-d').hover(function () {
       $('.button-title', this).animate({ opacity: 0.6 }, 200);
   });
});