Ändern geschachtelte Zeilenklasse onclick

Question

Ich habe Datensätze geschachtelt, die ich ein Bild in jeder Zeile onclick einer Klasse ändern möchte, aber mit meinem aktuellen Skript passiert nichts?

$(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

Optimieren Sie die CSS da, mit Ausnahme von dem Bild, ist es völlig gleich:

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

Durch das Hinzufügen der zusätzlichen .star_color Klasse das Bild außer Kraft gesetzt werden soll.

Edit:

Jetzt mit Geige und Phantasie Bilder: https://jsfiddle.net/3mq5rarh/1/

Answer 2

Ich werde versuchen:

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

Was passiert ist, dass star_color Klasse nach Makeln, Ihr div Element beco wird mich <div class="star_grey star_color">. Daher möchten Sie, dass Ihr Hintergrundbild star_color das Bild star_grey überschreibt, indem Sie !important hinzufügen.