創建一個乾淨的功能

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

來源

2016-02-03 Simon

爲4和6，你有'異常跟蹤「和」事件「？ – nikhil

循環播放數字並使用它構建選擇器？更適合代碼審查堆棧交換，不是嗎？ –

你知道元素的數量嗎？想想一個循環。 – kosmos

您可以使用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); 

}

來源

2016-02-03 12:55:36 nikhil

這個問題的很好的解決方案，但不是通用的，而是如果名稱以隨機順序出現，則不是數字。 –

@Sumit - 我知道。這不是一個通用的解決方案，儘管我從來沒有打算過。無論如何感謝你提及。 – nikhil

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

來源

2016-02-03 12:55:37

好的解決方案。 Upvoted – nikhil

創建一個乾淨的功能

回答

相關問題