/ / jQuery - Zmienianie obrazów po kliknięciu (Upraszczanie funkcji) [zamknięte] - jquery, image, getelementbyid

jQuery - Zmiana obrazów na Click (Upraszczanie funkcji) [closed] - jquery, image, getelementbyid

Stworzyłem mini demo do zmiany obrazów naKliknij. Pomyślałem, że mogę uzyskać informacje zwrotne, aby zobaczyć, jak mogę minize / uprzątnąć kod. Nie zwracaj uwagi na rozmiary obrazów, są one "FPO". Istnieje również niewielkie opóźnienie podczas ładowania obrazu. Jak mogę zintegrować preloader z tym przykładem?

Nie sądzę, że jest to najlepsze rozwiązanie, aby osiągnąć to, co próbuję osiągnąć. Czy ktoś ma jakieś podobne zasoby, którymi mnie kieruję?

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

Odpowiedzi:

1 dla odpowiedzi № 1

Kilka opcji dla ciebie.

1. Użyj mapy:

(Patrz uwagi poniżej.)

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

Dwie uwagi na ten temat:

  1. Zrobiłem bardziej skomplikowaną rzecz użyciaoddzielne obrazy na przód i tył, na wszelki wypadek, jeśli chodzi o to, co masz na myśli, nie od razu widząc, dlaczego chcemy powtórzyć ten sam obraz dwa razy. Jeśli naprawdę chcesz użyć tego samego obrazu dwa razy, po prostu wybierz wheelX wprowadź rzeczywistą ścieżkę, a nie obiekt z front i back.

  2. Uwzględniałem pełną ścieżkę w przypadku, gdy jest ona różna, jeśli nie jest różna, oczywiście przenieś niezmienny bit do funkcji i po prostu dołącz 50x50 lub cokolwiek na mapie.

2. Użyj data-* atrybuty na elementach.

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

... gdzie koła określają obrazy w znacznikach:

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

... i odnoszą się do tego te same dwie notatki z góry.