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

Answer 2

两个简化：

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

现在，您并不需要.each，因为.hover会自动应用于选择器提供的每个元素：

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

接受你的选择！

Answer 3

我没有看到这些功能有什么不同，包括不透明度。但是您可以在jQuery调用中对选择器进行分组，例如：

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

如果您最初没有选择器，但是稍后想要将它们添加到链中，您也可以使用jQuery.add()。 e.g。

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

Answer 4

是的，请使用multiple selector。

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

Answer 5

您只需要：

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

一直以来。你已经把所有东西都放在了“准备好”的处理程序中。

是否可以结合jquery的每个功能？

5 个答案: