/ / jQuery - Zmena obrázkov po kliknutí (zjednodušujúce funkcie) [zatvorené] - jquery, image, getelementbyid

jQuery - zmena obrázkov po kliknutí (zjednodušujúce funkcie) [closed] - jquery, image, getelementbyid

Vytvoril som mini demo pre zmenu obrázkovna tlačidlo OK. Myslím, že môžem získať spätnú väzbu, aby som videl, ako môžem skomplikovať / vyčistiť kód. Nezabúdajte na veľkosť obrázkov, sú to FPO. Okrem toho dochádza k miernemu oneskoreniu zaťaženia obrazu. Ako môžem integrovať preloader do tohto príkladu?

Nemyslím si, že je to najlepšie riešenie na dosiahnutie toho, čo sa snažím dosiahnuť. Ktokoľvek má podobné prostriedky, ktoré by mi ukázali?

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

odpovede:

1 pre odpoveď č. 1

Niekoľko možností pre vás.

1. Použite mapu:

(Pozri poznámky nižšie.)

$(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;
}
}
});

Dve poznámky k tomuto:

  1. Urobil som zložitejšiu vec používaniaoddelené obrazy pre predné a zadné, len v prípade, že to, čo ste mysleli, nie je okamžite vidieť, prečo by sme chceli opakovať rovnaký obrázok dvakrát. Ak naozaj chcete použiť rovnaký obrázok dvakrát, stačí urobiť wheelX zadajte skutočnú cestu skôr ako objekt front a back.

  2. Ak ste sa nezmenili, samozrejme presuňte invariantný bit do funkcie a jednoducho vložte 50x50 alebo čo na mape.

2. Použite data-* atribúty na prvky.

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

... kde vaše kolesá špecifikujú obrázky v označení:

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

... a na to sa vzťahujú rovnaké dve poznámky zhora.