Yuvalanmış satır sınıfını onclick olarak değiştir

Question

Sınıfın her satırındaki bir resmi değiştirmek istediğim yuvalarım var ancak geçerli komut dosyamda hiçbir şey olmuyor mu?

$(document).ready(function() { 
    $(".star_gray").click(function() { 
     $(this).toggleClass('star_color'); 

    }); 
}); 

HTML

<a href="#"> <div class="star_gray"></div></a> 

CSS

.star_color { 
    position:absolute; 
    background-image: url(../img/star_liked.png); 
    width: 24px; 
    height: 23px; 
    background-repeat: no-repeat; 
    background-position: center; 
    right:5px; 
} 

.star_gray { 
    position: absolute; 
    background-image: url(../img/star_not_liked.png); 
    width: 24px; 
    height: 23px; 
    background-repeat: no-repeat; 
    background-position: center; 
    right: 5px; 
} 

Answer 1

CSS optimize edin:

.star_gray { 
    position: absolute; 
    background-image: url(../img/star_not_liked.png); 
    width: 24px; 
    height: 23px; 
    background-repeat: no-repeat; 
    background-position: center; 
    right: 5px; 
} 

.star__gray.star_color { 
    background-image: url(../img/star_liked.png); 
} 

görüntü geçersiz kılınmış ekstra .star_color sınıfını ekleyerek.

Düzenleme: keman ve fantezi görüntülerle Şimdi

: En css star_color içinde https://jsfiddle.net/3mq5rarh/1/

Answer 2

ben çalışacağım:

.star_color { 
    background-image: url(../img/star_liked.png) !important; 
} 

ne olur star_color sınıfını geçmek sonra, sizin div eleman beco olmasıdır bana <div class="star_grey star_color">. Bu nedenle, star_color arka plan görüntüsünün !important ekleyerek star_grey görüntüsünü geçersiz kılmasını istiyorsunuz. görüntüden hariç tamamen aynı şey, çünkü