更好，更清潔的方式來寫這個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'}); 
    }); 
}) 

EDIT：糟糕，參數爲倒退。
編輯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元素循環，讓（我+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