0

data-next単純にdata-prev、、、属性を持つ div がありdata-catます。

そして、これがこれまでのjsです..

$(document).keydown(function(event) {

    var prev = $("#myDiv").attr('data-prev'),
        cat = $("#myDiv").attr('data-cat'),
        next = $("#myDiv").attr('data-next');

    switch (event.keyCode) {

        case 37:
            if (prev >= 1) {
                window.location = "http://site.com/picture/" + prev;
            }
            break;

        case 39:
            if (next > 1) {
                window.location = "http://site.com/picture/" + next;
            }
            break;
    }
});​

コードは機能していますが、左右のアクションに対してのみです。猫の場合はそのようにすると思いますが、それは間違っていると思いますし、もっと良い方法があると思います!

$(document).keydown(function(event) {

    var prev = $("#myDiv").attr('data-prev'),
        cat = $("#myDiv").attr('data-cat'),
        next = $("#myDiv").attr('data-next');

    if (cat) {
        switch (event.keyCode) {

        case 37:
            if (prev >= 1) {
                window.location = "http://site.com/picture/" + prev;
            }
            break;
        case 39:
            if (next > 1) {
                window.location = "http://site.com/picture/" + next;
            }
            break;

        }
    }
    else {
        switch (event.keyCode) {
            // but i dont how to insert the cat var the link have to be cat/{n}/picture/{n}
        case 37:
            if (prev >= 1) {
                window.location = "http://site.com/picture/" + prev;
            }
            break;
        case 39:
            if (next > 1) {
                window.location = "http://site.com/picture/" + next;
            }
            break;

        }
    }
});​
4

1 に答える 1

1

（コメントでたくさんの説明）

それで、なぜwindow.locationを使用したのか疑問に思いました：それはページの無駄な更新をします。

キーを押すとimgsrcを変更する、非常に基本的な小さなスクリプトを作成しました。あなたはそれを微調整する必要があるかもしれませんが（私はplacekitten.comの猫を使用しました）、私はあなたの画像の番号付けを維持します。シンプルでわかりやすいものにするように心がけました。

http://jsfiddle.net/teVPD/11/

多くの機能（アニメーション、猫のプリロード）を追加できますが、車のスライダーを強化するための良いスタートです。

ご覧になり、ご不明な点がございましたら、お気軽にお問い合わせください。

于 2012-04-26T16:33:35.113 に答える