jquery - 让简单的 jQuery 函数更加高效

Question

我有一个函数，我知道这不是最有效的编写方式，不仅对于这个函数，而且对于将来的其他函数也是如此。

除了每次重复时数字都会 += 1 之外，都是相同的行，所以我确信有一个 for、if 或 every 方法来循环它并减少代码并同时提高可维护性。

 function lines() {                     
     $('#bottom-1').lazylinepainter( 
     {
        "svgData": pathObj1,    //only line that changes
        "strokeWidth": 1,
        "strokeColor": "#fff"
    }).lazylinepainter('paint'); 



      $('#bottom-2').lazylinepainter( 
     {
        "svgData": pathObj2,    //only line that changes
        "strokeWidth": 1,
        "strokeColor": "#fff"
    }).lazylinepainter('paint'); 




     $('#bottom-3').lazylinepainter( 
     {
        "svgData": pathObj3,    //only line that changes
        "strokeWidth": 1,
        "strokeColor": "#fff"
    }).lazylinepainter('paint'); 



     $('#bottom-4').lazylinepainter( 
     {
        "svgData": pathObj4,    //only line that changes
        "strokeWidth": 1,
        "strokeColor": "#fff"
    }).lazylinepainter('paint'); 

     $('#solutions h2').delay( ).animate({opacity:'1'}, 1000, 'easeInQuint')
     }

Answer 1

试试这个:

$('div[id^="bottom-"]').lazylinepainter( 
     {
        "svgData": $(this).data('path'),    //only line that changes
        "strokeWidth": 1,
        "strokeColor": "#fff"
    }).lazylinepainter('paint');

你的 div (或者你的 dom 元素)是这样的:

<div id="bottom-1" data-path="path1"></div>
<div id="bottom-2" data-path="path2"></div>
<div id="bottom-3" data-path="path3"></div>