编写此 jQuery 代码的更好、更简洁的方法答案

【问题标题】：Better, cleaner way to write this jQuery code编写此 jQuery 代码的更好、更简洁的方法
【发布时间】：2012-05-08 18:24:44
【问题描述】：

我目前写了这个，但标题说有没有更好的方法来编写/优化这个代码？

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

【问题讨论】：

关于优化工作代码的问题，你可以考虑codereview.stackexchange.com
在这个以及建议的答案中，您可能还想在元素上使用 preventDefault() 。如果它们有值，点击将尝试加载这些值（页面锚点或链接）。

标签： jquery optimization click jquery-animate

【解决方案1】：

如果你想做的只是缩短它，这样的事情可能会奏效。

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

编辑：糟糕，参数倒退了。
编辑 2：正如 Imp 在下面提到的，我们需要确保它正确调用 - 我只是做了一个不同的方式

【讨论】：

这不是“更好”或“更清洁”的方式。其实这比原来的代码还差：jsperf.com/five-buttons/2
@JonathanSampson：我并不是说有更好的方法，但我认为对于想改变这样一段相对简单的代码的人来说，你的方法可读性较差，也许因此用处不大。

【解决方案2】：

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 元素，以便第 (i+1) 个元素与第 i 个坐标相关联。要绑定到click 事件的函数不是直接指定的，而是由立即调用的函数表达式返回。原因是，如果我只是简单地写了

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

那么所有回调函数都会在闭包中引用相同的i，其值在当时为5。

【讨论】：

【解决方案3】：

负载效率更高一点，因为它只调用一次.click()：

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

这具有无需修改 javascript 即可添加更多按钮的额外好处。

【讨论】：

【解决方案4】：

首先选择所有类别以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

【讨论】：