/ / jQuery - クリック時の画像の変更(機能の簡略化)[閉じる] - jquery、image、getelementbyid

jQuery - クリック時の画像の変更(機能の簡略化)[閉じる] - jquery、image、getelementbyid

私は画像を変更するためのミニデモを作成しましたクリック。私はどのように私はコードを最小化/クリーンアップすることができるかを確認するためにいくつかのフィードバックを得ることができると思った。画像のサイズを気にしないでください、彼らは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";
});
});

回答:

回答№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つのメモがこれに当てはまります。