Aktywny stan na kodzie aktywującym jquery - javascript, jquery, html, css

Mam następujący kod, który znakomicie zmienia nazwę obrazu z image_off.jpg na image_on.jpg po najechaniu myszą. Używam go do galerii.

    $(function(){
$(".img-swap").hover(
function(){this.src = this.src.replace("_off","_on");},
function(){this.src = this.src.replace("_on","_off");
});
});

Jednak chcę, aby nazwa obrazu pozostała na image_on.jpg po kliknięciu jednego z obrazów. Czy jest to możliwe i czy możliwe jest włączenie zamiany z powrotem po kliknięciu innego?

Dzięki

Odpowiedzi:

2 dla odpowiedzi № 1

Mam nadzieję że to pomoże

będzie działał dobrze, jak chcesz, z włączaniem i wyłączaniem hovera, a po kliknięciu img zostanie on wybrany i pozostanie tam, a efekt najechania nie będzie działał

a kiedy klikniesz następne zdjęcie, wszystkie pozostałe, które zostaną wybrane, zostaną usunięte, a efekt najechania na to zadziała

EDYCJA ** Zmieniłem kod Wypróbuj teraz

$(function(){
$(".img-swap").hover(
function(){
if(!$(this).hasClass("selected")) {
this.src = this.src.replace("_off","_on");
}
},
function(){

if(!$(this).hasClass("selected")) {
this.src = this.src.replace("_on","_off");
}

}).click(function(){
$(".img-swap").removeClass("selected").attr("src",this.src.replace("_on","_off"));;
this.src = this.src.replace("_off","_on");
$(this).addClass("selected").attr("src",this.src.replace("_off","_on"));
});
});

---

1 dla odpowiedzi nr 2

Możesz użyć przełącznika zamiast najechania myszką:

 $(".img-swap").toggle(
function(){this.src = this.src.replace("_off","_on");},
function(){this.src = this.src.replace("_on","_off");
});

EDYCJA: aby przypiąć obraz po kliknięciu (nie można go zmienić z powrotem na wyłączony), możesz to zrobić:

$(".img-swap").hover(
function(){this.src = this.src.replace("_off","_on");},
function(){if (!pinned) this.src = this.src.replace("_on","_off");
}).click(){
$(this).data("pinned": !($(this).data("pinned")||false));
});

---

0 dla odpowiedzi № 3

Oto niektóre (nieprzetestowane) kod:

 $(function(){
$(".img-swap").hover(
function(){
this.src = this.src.replace("_off","_on");
},
function(){
if(!this.hasClass("selected")) {
this.src = this.src.replace("_on","_off");
}
}).click(function() {
$(".img-swap.selected").removeClass("selected");
this.addClass("selected");
});
});

To co robi to dodawanie .selected klasa do każdego klikniętego elementu. Funkcja najechania myszą sprawdza tę klasę i dokonuje zamiany tylko wtedy, gdy obraz nie jest zaznaczony.

---

0 dla odpowiedzi nr 4

Możesz po prostu dodać zdarzenie hover css dla klasy, jeśli możesz

.img-swap: hover {src: image_on.jpg}

---