Question

我有这个HTML：

<div class="container">
    <div id="cell1" class="cell"><div class="content"></div></div>
    <div id="cell2" class="cell"><div class="content"></div></div>
    <div id="cell3" class="cell"><div class="content"></div></div>
</div>

CSS：

.container {
    width: 300px;
    height: 300px;
    background-color: green;
}

.cell {
    background-color: red;
}

#cell1 {
    width: 70px;
    height: 70px;
}

#cell2 {
    width: 70px;
    height: 70px;
}

#cell3 {
    width: 70px;
    height: 70px;
}

.white {
    background-color: white;
}

.yellow {
    background-color: yellow;
}

.content {
    width:40px;
    height:40px;
    background-color:blue;
}

使用Javascript：

$(document).on('click', '.cell', function(e) {

    $(this).parent().children().removeClass('white');
    $(this).parent().children().children().removeClass('yellow');

    $(this).addClass('white');
    $(this).find('.content').addClass('yellow');
});

我现在遇到的问题是addClass（'yellow'）无效。但是，如果我删除内容类中的背景颜色，它可以工作。有什么想法吗？

jsFiddle链接： http://jsfiddle.net/rexwang/FWh6E/

感谢您的回答，它的确有效！但我真的不喜欢使用addClass和removeClass，是否可以使用e.currentTarget.id来实现相同的目标？

Answer 1

虽然有效，但.yellow背景样式会被.content背景样式覆盖，因为在样式表.content中，类跟在.yellow之后。

一种方法是在CSS中交换这些类。

DEMO： http://jsfiddle.net/FWh6E/2/

Answer 2

.addClass() 有效，但由于CSS规则的应用方式，.content选择器的权重比{{1}更多单个类选择器 - 请参阅CSS specificity了解星球大战主题的特殊性解释。

在CSS documentation中，最后一个句子用于确定应用哪个规则。

最后，按指定顺序排序：如果两个声明具有相同的权重，来源和特异性，则后者指定获胜。导入样式表中的声明被认为是在样式表本身中的任何声明之前。

因此，你可以在CSS文件中交换规则的顺序，在.yellow后移动.yellow，或者通过.content选择器更多权重向链中添加另一个选择器，例如：

.yellow

Answer 3

put！important for this

.yellow {
    background-color: yellow !important;
}

试试这个FIDDLE

Answer 4

JSFIddle链接：http://jsfiddle.net/Cj4PT/

您的代码

.yellow {
    background-color: yellow;
}

更改为

.yellow {
    background-color: yellow!important;
}

.content背景样式覆盖了.yellow样式

Answer 5

试试这个

更改CSS yellow，如下所示：

.yellow {
    background-color: yellow!important;
}

Demo

jquery addClass没有效果

5 个答案: