更好，更清洁的方式来写这个jQuery代码

问题描述：

我目前有这样写，但标题说有没有更好的方式来编写/优化此代码？更好，更清洁的方式来写这个jQuery代码

var p = $('#pstrip'); 

$('a.Btn1').click(function() { 
    p.animate({left: '0px'}); 
}); 
$('a.Btn2').click(function() { 
    p.animate({left: '-730px'}); 
}); 
$('a.Btn3').click(function() { 
    p.animate({left: '-1460px'}); 
}); 
$('a.Btn4').click(function() { 
    p.animate({left: '-2190px'}); 
}); 
$('a.Btn5').click(function() { 
    p.animate({left: '-2920px'}); 
});

有关优化工作代码的问题，你可能会考虑http://codereview.stackexchange.com/ – 2012-04-28 03:05:08

在此，也建议的答案，你也可能想要元素上的preventDefault（）。如果他们有值，点击会尝试加载这些值（页面锚点或链接）。 – 2012-04-28 03:25:26

答

如果你想要做的只是缩短它，像这样的东西可以工作。

$.each([1,2,3,4,5], function(idx, el) { 
    var ix = idx; 
    $('a.Btn' + el).click(function() { 
     p.animate({left: (-730*ix) + 'px'}); 
    }); 
})

EDIT：糟糕，参数为倒退。
编辑2：由于进出口注意到下面，我们需要确保它正确调用 - 我只是做了不同的方式

非常感谢你 – 2012-04-28 03:18:56

这对OP的代码没有任何改进。 – dtbarne 2012-04-28 03:20:14

这不是一种“更好”或“更清洁”的方式。事实上，这比原来的代码更糟糕：http://jsperf.com/five-buttons/2 – Sampson 2012-04-28 04:03:05

答

var p = $('#pstrip'); 
var coords = [0, -730, -1460, -2190, -2920]; 

for (var i = 0; i < 5; i++) 
    $('a.Btn' + (i + 1)).click((function(index) { 
     return function() { 
      p.animate({left: coords[index]}); 
     } 
    })(i));

我把坐标转换成数组，并通过a.Btn元素循环，让（我+1）元素与第i个坐标关联。绑定到click事件的函数没有直接指定，而是由立即调用的函数表达式返回。原因是，如果我只是清楚地写

.click(function() { p.animate({left: coords[i]}); })

那么所有的回调函数会指在封闭同一i，这将对在时间值5。

答

一点上负载更有效的，因为它不仅使一个呼叫到.click()：

$("#button_container a").click(function() { 
    $("#pstrip").animate({left: ($(this).attr("class").match(/Btn([0-9]+)/)[1] * -730) + "px"}); 
});

这具有能够以添加更多的按钮，而不必修改的JavaScript的附加益处。

答

这首先选择所有以Btn开头的班级的主持人。然后它绑定到他们所有的一个匿名函数，它决定了像素数量#pstrip将被移位。

$("a[class^=Btn]").on("click", function(){ 
    var n = -730 * (this.className.match(/\d+/) - 1); 
    $("#pstrip").animate({ left: n + 'px' }); 
});

这将适用于任何数量的锚点。

演示：http://jsbin.com/ovibun/5/edit
性能：http://jsperf.com/five-buttons/3

enter image description here

更好，更清洁的方式来写这个jQuery代码

相关推荐