jquery - 更改嵌套行类 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 类，应该覆盖图像。

编辑:

现在有了 fiddle 和花哨的图像:https://jsfiddle.net/3mq5rarh/1/