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

Question

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

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

代码类似，小的不同是$('.button-a'),$('.button-b'),$('.button-c'),$('.button -d')，是否可以组合jquery的各个功能？这样我就可以缩短我的代码？谢谢。

Answer 1

您可以使用multiple-selector^[docs] .

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