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

假设.pin-bounce是一个孩子，你可以创建一个悬浮函数，该函数在公共类之外工作，然后在其中查找该类。

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

}

创建一个干净的函数

2 个答案: