0

クリックで画像を変更するためのミニデモを作成しました。コードを最小化/クリーンアップする方法を確認するためのフィードバックを得ることができると思いました。画像サイズは気にしないでください。FPO です。画像の読み込みにもわずかなラグがあります。この例にプリローダーを統合するにはどうすればよいですか?

これが私が達成しようとしていることを達成するための最良の解決策だとは思いません。誰かが私に指摘する同様のリソースを持っていますか?

http://jsfiddle.net/mJ7Wc/

$(document).ready (function () {
    $('#wheel1').click (function () {
        document.getElementById('changeBack').src='http://placehold.it/50x50';
        document.getElementById('changeFront').src='http://placehold.it/50x50';
    });
    $('#wheel2').click (function () {
        document.getElementById('changeBack').src='http://placehold.it/30x30';
        document.getElementById('changeFront').src='http://placehold.it/30x30';
    });
 $('#wheel3').click (function () {
        document.getElementById('changeBack').src='http://placehold.it/60x60';
     document.getElementById('changeFront').src='http://placehold.it/60x60';
    });
    $('#wheel4').click (function () {
        document.getElementById('changeBack').src='http://placehold.it/80x80';
        document.getElementById('changeFront').src='http://placehold.it/80x80';
    });
});
4

1 に答える 1

1

いくつかのオプションがあります。

1. マップを使用します。

(以下の注を参照してください。)

$(document).ready (function () {
    var images = {
        wheel1: {
            front: 'http://placehold.it/50x50',
            back:  'http://placehold.it/50x50'
        },
        wheel2: {
            front: 'http://placehold.it/30x30',
            back:  'http://placehold.it/30x30'
        },
        wheel3: {
            front: 'http://placehold.it/60x60',
            back:  'http://placehold.it/60x60'
        },
        wheel4: {
            front: 'http://placehold.it/80x80',
            back:  'http://placehold.it/80x80'
        }
    };

    $(".wheels").click(function() {
        var entry = images[this.id];
        if (entry) {
            $('#changeFront')[0].src = entry.front;
            $('#changeBack')[0].src  = entry.back;
        }
    }
});

それに関する2つの注意：

  1. 念のため、前面と背面に別々の画像を使用するというより複雑なことを行いました。同じ画像を 2 回繰り返したい理由がすぐにはわかりません。本当に同じ画像を 2 回使用したい場合は、 と を使用して、wheelXエントリをオブジェクトではなく実際のパスにしfrontますback。

  2. 異なる場合に備えて、フルパスを含めました。変化しない場合は、もちろん、不変ビットを関数に移動50x50し、マップにまたは何でも含めます。

2.data-*要素に属性を使用します。

$(document).ready (function () {
    $(".wheels").click(function() {
        var $this = (this);
        $('#changeFront')[0].src = $this.attr("data-front");
        $('#changeBack')[0].src  = $this.attr("data-back");
    }
});

...ホイールがマークアップで画像を指定する場所:

<div id="wheel1" class="wheels" data-front="http://placehold.it/50x50" data-back="http://placehold.it/50x50">

...そして、上記と同じ 2 つの注記がこれに適用されます。

于 2013-03-01T17:56:17.437 に答える