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

I have many buttons, when hover each, there will have some opacity change.

The codes are similar, the small different is $('.button-a'),$('.button-b'),$('.button-c'),$('.button-d'), whether can combine jquery each function? so that I can shorter my code? Thanks.

Answer 1

Two simplifications:

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

You can shorten the on-ready call too:

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

And you can merge selectors:

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

Now, you don’t really need .each, as .hover will automatically apply to each element given by the selector:

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

Take your pick!