css ve/veya javascript resmi tıklatarak arka planı değiştir

Question

class="tasteTheRainbow" numaralı bir divam var ve içeride img etiketleri var. Özellikle bir etiket, .gA3 adında bir png sınıfıdır.

Şimdi tasteTheRainbow zaten bir css arka plan URL'si var, ancak .gA3 öğesine dokunduğunuzda veya tıklattığınızda, arka plan URL'sinin değişmesini istiyorum.

Diğer birçok stackoverflow yayınını denedim ve çözüm bulunamadı.

İşte benim HTML ve benim CSS: Ben CSS classname:active kullanarak denedi Yukarıda bahsettiğim gibi

<div class="tasteTheRainbow"> 
    <div class="greenArrow"> 
     <img class="gA1" src="assets/arrows/down.png"/> 
     <img class="gA2" src="assets/arrows/in.png"/> 
     <img class="gA3" src="assets/arrows/left.png"/> 
     <img class="gA4" src="assets/arrows/out.png"/> 
     <img class="gA5" src="assets/arrows/right.png"/> 
     <img class="gA6" src="assets/arrows/up.png"/> 
    </div> 
</div> 

.tasteTheRainbow { 
    background-image: url(../assets/fivePix.png); 
    background-repeat: repeat; 
    position: absolute; 
    background: url(../assets/tombrady1.jpg) no-repeat center center fixed !important; 

    -webkit-background-size: cover; 
    background-size: cover; 
    display: block !important; 
} 

. Birden çok java script çözümlerini denedim ve sadece image1 ile image2 arasında arka plan url'sini değiştirmiyorlar.

Answer 1

Benim tavsiye edilen çözüm elemanı (örnek .tasteTheRainbow) yanı sıra yeni devletin (örnek .tasteTheRainbowNew) başlangıçtaki durumuna ikisi için de bir CSS sınıfı oluşturmak ve sonra/uygulamak sınıfını kaldırmak için Javascript kullanmaktır. Ayrıca http://jsfiddle.net/oxv0rc1k/2/

benim JS onsuz berbat çünkü JQuery yüklü olduğuna dikkat:

$(function() { 
    $(".gA3").click(function() { 
     $(this).parent(".tasteTheRainbow").toggleClass("tasteTheRainbowNew"); 
    }); 
}); 

burada JSfiddle bakın.