Question

我有嵌套记录，我希望在每一行上更改一张图片，但是我的当前脚本没有任何反应？

overflow : scroll;

HTML

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

    });
});

CSS

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

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元素将变为<div class="star_grey star_color">。因此，您希望star_color的背景图片通过添加star_grey覆盖!important的图像。

更改嵌套行类onclick

2 个答案: