jquery - CSS addClass 不会更改背景图像

Question

当我激活此按钮时，我想应用图像“bars_small.png”(这是您悬停时看到的白色图像)。

jQuery:

        $("#btn_bars").click(function(){
            if(!$(this).hasClass('btn_header_active')){
                    $('.ch-grid .btn_header_active').removeClass('.btn_header_active');
                    $(this).addClass('btn_header_active');
                });
            }
        });

CSS:

#btn_bars .btn_header_active .ch-info{

    background-image: url(http://www.zwoop.be/develop/images/fisheye/bars_small.png);
    background-repeat: no-repeat;
    background-position: center;
}

完整的菜单代码和视觉效果我引用了这个jsFiddle: http://jsfiddle.net/kimgysen/6ryav/

Answer 1

如果您将点击函数更改为以下内容:

$(".ch-item").click(function(){
    var thisButton = $(this);
    if(!thisButton.hasClass('btn_header_active')){
        $('.ch-grid .btn_header_active').removeClass('btn_header_active');
        thisButton.addClass('btn_header_active');
        active_header = 1;
    }
});

然后将 css 选择器从 #btn_bars .btn_header_active .ch-info 更改为 #btn_bars.btn_header_active .ch-info (id 和第一个类之间没有空格因为类位于具有 id 的元素上，而不是它的子元素上)，它应该按您想要的方式工作:

Demo