ネストされた行クラスを変更するonclick

Question

クラスのクリックで各行の画像を変更したいネストされたレコードがありますが、現在のスクリプトでは何も起こりません。

$(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の最適化：

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

画像をオーバーライドする必要があり、余分な.star_colorクラスを追加することによって。

編集：フィドルと派手なイメージを持つ今

：https://jsfiddle.net/3mq5rarh/1/

Answer 2

は私がしようとします：

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

何が起こるかというとstar_colorクラスを切り替えた後、あなたのdiv要素がBECOということです私<div class="star_grey star_color">。したがって、あなたのstar_colorの背景イメージは、!importantを追加することによって、star_greyのイメージを上書きします。