/ / 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;
}
}
});

Две бележки по въпроса:

  1. Аз направих по-сложното нещо за използванеотделни изображения за предната и за гърба, само в случай, че това е това, което искаш да кажеш, а не веднага да видиш защо искаме да повтаряме едно и също изображение два пъти. Ако наистина искате да използвате едно и също изображение два пъти, просто направете wheelX въведете действителния път, а не обект front и back.

  2. Аз не съм включен пълен път в случай, че той варира.Ако не се различават, разбира се преместите invariant малко в функцията и просто включвате 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">

... и същите две бележки отгоре се отнасят до това.