Question

我有一个功能，我知道这不是最有效的编写方式，不仅适用于此功能，还适用于未来的其他功能。

它是相同的行，除了一个数字每次重复时得到+ = 1，所以我确定有一个for，或者，或者每种方式循环这个并减少代码并同时增加可维护性。

 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>

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

Answer 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/

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

使简单的jQuery函数更有效

3 个答案: