让简单的jQuery函数更高效答案

【问题标题】：Making simple jQuery function more efficient让简单的jQuery函数更高效
【发布时间】：2013-12-07 18:36:09
【问题描述】：

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

除了一个数字在每次重复时都会得到 += 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')
     }

【问题讨论】：

标签： jquery loops for-loop

【解决方案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>

【讨论】：

【解决方案2】：

你可以试试这样的东西，不是最佳但文字更少：

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);

【讨论】：

【解决方案3】：

给你。此解决方案不需要您将任何数据添加到您的 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/

如果您需要任何其他帮助，请告诉我。

【讨论】：