使簡單的jQuery功能更有效

我有一個函數，我知道這不是編寫它的最有效的方法，不僅是爲了這個函數，而且是爲了將來的其他人。使簡單的jQuery功能更有效

這是相同的行，除了一個數字每次重複獲得+ = 1，所以我確信這是一個for，或者if，或者每個方法來循環這個，並且減少代碼並且同時增加可維護性。

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') 
    }

來源

2013-12-07 user1500354

試試這個：

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

和你的股利（或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>

來源

2013-12-07 18:39:59

你可以嘗試這樣的事情，不是最優的，但少的文字：

var svg1 = 0, 
    svg2 = 1, 
    svg3 = 2; 

function test(idTag, svgDataTag, num) { 
    for (var i = 1; i <= num; i++) { 
     alert('#' + idTag + i); // element id 
     alert(eval(svgDataTag + i)); // svgData object 
    } 
} 

test('button', 'svg', 3);

來源

2013-12-07 18:47:46 Limon

在這裏，你去。此解決方案不要求您將任何數據添加到您的div，或者您擁有的每個元素的變量。這將遍歷以「bottom-」開頭的每個元素，最後拉出數字，並將其添加到「pathObj」。這樣，你真的不需要改變很多代碼。我基於你的代碼的唯一未知是，「pathObj」是否可以與數字連接。如果沒有，那麼也有辦法解決這個問題，我可以幫你解決問題。

$("[id^='bottom-']").each(function() { 
    var idArray = $(this).attr("id").split("-"); 
    var idNumber = idArray[idArray.length - 1]; 
    $(this).lazylinepainter({ 
     "svgData": pathObj + idNumber, //only line that changes 
     "strokeWidth": 1, 
     "strokeColor": "#fff" 
    }).lazylinepainter("paint"); 
})

因爲我真的沒有什麼「lazylinepainter」的任何細節不，我測試了我這樣的代碼，以顯示與同時被從ID拉到號警告：

<body> 
    <div id="bottom-1" /> 
    <div id="bottom-2" /> 
    <div id="bottom-3" /> 
    <script> 
     $("[id^='bottom-']").each(function() { 
      var idArray = $(this).attr("id").split("-"); 
      var idNumber = idArray[idArray.length - 1]; 
      alert(idNumber); 
     }) 
    </script> 
</body>

而這裏的，它記錄的數字控制檯，所以你可以驗證一個小提琴：

http://jsfiddle.net/9XZ2L/

如果您需要任何其他幫助，請讓我知道。

來源

2013-12-11 13:57:24

使簡單的jQuery功能更有效

回答

相關問題