编写这个jQuery代码的更好，更清晰的方法

Question

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

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

Answer 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 ：正如我们在下面提到的那样，我们需要确保它正确调用 - 我只是做了不同的方式

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

Answer 3

加载效率更高一些，因为它只调用.click()：

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

这样做的另一个好处是能够添加更多按钮而无需修改javascript。

Answer 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