JQuery - Başka bir arka plan görüntüsünü değiştirmek için tıklayın

Question

Bir arka plan resmini tıklatmayla başka bir arka plan resmi ile değiştirmek istiyorum. Sonunda görüntüyü tıklayarak görüntüyü açıp kapatabilirim.

HTML

 <div class="arrow-up" role="button"></div><div class="arrow-down" role="button"></div> 

CSS

.arrow-up { 
width: 15px; 
height: 14px; 
background-image: url("//b.thumbs.redditmedia.com/b3vXuNpkEkQVRIBnRfoVOgBmT-5X4BEnyMoP85J2QIg.png")!important; 
background-position: center center; 
border: none!important; 
} 

.arrow-down { 
margin: 2px 0px 0px 0px; 
width: 100%; 
height: 14px; 
display: block; 
cursor: pointer; 
background-position: center center; 
background-repeat: no-repeat; 
width: 15px; 
margin-left: auto; 
margin-right: auto; 
outline: none; 
} 
.arrow-down { 
width: 15px; 
height: 14px; 
background-image: url("//b.thumbs.redditmedia.com/b3vXuNpkEkQVRIBnRfoVOgBmT-5X4BEnyMoP85J2QIg.png")!important; 
background-position: center center; 
border: none!important; 
} 
.arrow-up { 
margin: 2px 0px 0px 0px; 
width: 100%; 
height: 14px; 
display: block; 
cursor: pointer; 
background-position: center center; 
background-repeat: no-repeat; 
width: 15px; 
margin-left: auto; 
margin-right: auto; 
outline: none; 
} 
.arrow-down { 
background-position: -30px -24px!important; 
} 
.arrow-down { 
background-image: url(sprite-reddit.ZDiVRxCXXWg.png); 
background-position: 0px -865px; 
background-repeat: no-repeat; 
} 

.arrow-up { 
background-position: 0px -24px!important; 
} 

JQuery

$(document).ready(function() { 
$(".arrow-up").click(function() { 
    $(this).css("background-image", "http://i.imgur.com/rySpqwS.jpg"); 
}); 
}); 

böyle görüntüyü geçiş mümkün olabilir mi? Çünkü bu çözüm işe yaramıyor.

jQuery

bir arka plan görüntü için doğru CSS değeri, içinde !important ile ayarlanmıştır olarak javascript, arka plan görüntüsü ayarlamak mümkün olmayacaktır url(image)

$(document).ready(function() { 
    $(".arrow-up").click(function() { 
     $(this).css("background-image", "url(http://i.imgur.com/rySpqwS.jpg)"); 
    }); 
}); 

Not olduğunu

$(document).ready(function() { 
$(".arrow-up").click(function() { 
if ($(this).css("background-image") ==  "//b.thumbs.redditmedia.com/b3vXuNpkEkQVRIBnRfoVOgBmT-5X4BEnyMoP85J2QIg.png") 
{ 
$(this).css("background-image", "url(http://imgur.com/dpvAtIb.jpg)") 
} 
else { 
    $(this).css("background-image", "url(//b.thumbs.redditmedia.com/b3vXuNpkEkQVRIBnRfoVOgBmT-5X4BEnyMoP85J2QIg.png)") 
} 
}); 

}); 

Answer 1

CSS ve !important satır içi stillerinin üzerine yazar, böylece stilinizden !important'u kaldırıncaya kadar hiçbir değişiklik görmezsiniz.
!important'u kullanmak, genellikle bir şeye şaşırtmadığınız anlamına gelir, bu, tüm stillerinizde kullanmanız gereken bir şey değildir.