创建一个干净的函数

Creating a clean function

本文关键字：函数 一个 创建      更新时间：2023-09-26

我在下面有大量的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');
    });
  });

假设 .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');
});

您可以使用 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);
}
相关文章：