创建一个干净的函数

Question

我下面有大量的JS块。我可以采取什么步骤来清理它，因为每次对不同的div迭代相同的函数。我把这个作为一个一般性的问题抛出，因为我不确定可以做些什么来简化这样的代码。

$(function() {
    $('#1').hover(function() {
      $('#1-pin').find('.pin-bounce').addClass('pin-hovered');
    }, function() {
      $('#1-pin').find('.pin-bounce').removeClass('pin-hovered');
    });
  });

  $(function() {
    $('#2').hover(function() {
      $('#2-pin').find('.pin-bounce').addClass('pin-hovered');
    }, function() {
      $('#2-pin').find('.pin-bounce').removeClass('pin-hovered');
    });
  });

  $(function() {
    $('#3').hover(function() {
      $('#3-pin').find('.pin-bounce').addClass('pin-hovered');
    }, function() {
      $('#3-pin').find('.pin-bounce').removeClass('pin-hovered');
    });
  });

  $(function() {
    $('#4').hover(function() {
      $('#4-pin').find('.pin-bounce').addClass('pin-hovered');
    }, function() {
      $('#4-pin').find('.pin-bounce').removeClass('pin-hovered');
    });
  });

  $(function() {
    $('#5').hover(function() {
      $('#5-pin').find('.pin-bounce').addClass('pin-hovered');
    }, function() {
      $('#5-pin').find('.pin-bounce').removeClass('pin-hovered');
    });
  });
  $(function() {
    $('#6').hover(function() {
      $('#6-pin').find('.pin-bounce').addClass('pin-hovered');
    }, function() {
      $('#6-pin').find('.pin-bounce').removeClass('pin-hovered');
    });
  });

Answer 1

$('.some-common-class-instead-of-id').hover(function() {
  $(this).find('.pin-bounce').addClass('pin-hovered');
}, function() {
  $(this).find('.pin-bounce').removeClass('pin-hovered');
});

如果它不是一个孩子，你可以做一些类似的事情，但不只是寻找孩子，你可以建立一个这样的字符串：

$('.some-common-class-instead-of-id').hover(function() {
  var idToFind = $(this).attr('id') + '-pin';
  $('#' + idToFind).find('.pin-bounce').addClass('pin-hovered');
}, function() {
  var idToFind = $(this).attr('id') + '-pin';
  $('#' + idToFind).find('.pin-bounce').removeClass('pin-hovered');
});

Answer 2

您可以使用for循环。

for (var i = 1; i <= 6; i++) {
    (function(i){
        $('#'+i).hover(function() {
           $('#'+i+'-pin').find('.pin-bounce').addClass('pin-hovered');
        }, function() {
           $('#'+i+'-pin').find('.pin-bounce').removeClass('pin-hovered');
        });
    })(i);

}