3

私は現在これを書いていますが、タイトルはこのコードを書く/最適化するためのより良い方法はありますか？

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

4 に答える 4

4

あなたがしたいのがそれを短くすることだけであるならば、このような何かがうまくいくかもしれません。

$.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が以下に示すように、正しく呼び出されることを確認する必要があります-私は別の方法を実行しました

于 2012-04-28T03:07:15.413 に答える
2

これは、で始まるクラスを持つすべてのアンカーを選択することから始まります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

ここに画像の説明を入力してください

于 2012-04-28T03:44:52.217 に答える
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

于 2012-04-28T03:10:57.130 に答える
2

呼び出しを1回だけ行うため、ロード時にもう少し効率的.click()です。

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

これには、JavaScriptを変更せずにボタンを追加できるという追加の利点があります。

于 2012-04-28T03:11:11.437 に答える