Создание чистой функции

Question

У меня есть массивный блок JS ниже. Какие шаги я могу предпринять, чтобы очистить его, поскольку каждый раз он выполняет одну и ту же функцию для разных div. Im бросает это там как общий вопрос, поскольку Im не уверен, что можно сделать, чтобы упростить такой код.

$(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

Вы можете использовать цикл 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); 

} 

Answer 2

Предполагая, что .pin дребезг является ребенком, вы можете создать одну функции парения, которая работает от общего класса, а затем внутри этого просто посмотрите на класс.

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