Question

只想动态更改背景，似乎无法做到，我在这里缺少什么？我应该澄清一下，这是我试图改变的容器div的背景......

$('#container').click(function(){
    $(this).toggleClass('bgchange');
});

$('#container ul li').click(function(){
    $(this).toggleClass('bgchange');
});

小提琴http://jsfiddle.net/7ed7zs9w/1/

Answer 1

id标识符比容器css的类标识符更具体，因此它被覆盖。因此，如果要覆盖容器并使其更改颜色，请添加!important。示例http://jsfiddle.net/e5bgsh3v/

Answer 2

JSFIDDLE DEMO - ＆gt; http://jsfiddle.net/7ed7zs9w/4/

这种情况正在发生，因为CSS中的#container选择器中提到的背景颜色的层次结构高于类bgchange。因此它永远不会改变。

进行以下更改：

HTML

<div id="container" class="redbg"> //add class redbg here

CSS

#container{
    height: 150px; //remove background-color here
    overflow-y: scroll;
}
.bgchange{
    background-color: blue;
}
.redbg{
    background-color: red;
}

的jQuery

$('#container').click(function(){
    $(this).toggleClass('redbg bgchange'); // toggle between 2 classes instead of 1
});

$('#container ul li').click(function(e){
    e.stopPropagation(); // add this here
    $(this).toggleClass('bgchange');
});

无法更改包含无序列表的div的背景

2 个答案: