jquery addClass 找不到 css 类

Question

喂!我的赔率 DIV 上有一个点击事件，它应该编辑我的背景颜色、奇数、名称和值 div 的字体等!!

奇数 div 的变化有效，但子 div 无效!!!

    <div class="oddspanel ui-grid-a">
        <div class="description ui-block-a">
            Description
        </div>
        <div class="odd ui-block-b">
            <div class="name">
                Name
            </div>
            <div class="value">
                1,40
            </div>
        </div>
    </div>

这是我的脚本代码:

    $(".odd").click(function(){
        $(this).removeClass("odd").addClass("odd-active");
        $(this).children(".name").removeClass("name").addClass("name-active");
        $(this).children(".value").removeClass("value").addClass("value-active");
    });

我的 CSS 代码:

.odd .name {
width: 100%;
height: 15px;
line-height: 15px;
text-align: center;
font-size: x-small;
color: white;
 }

.odd .value {
width: 100%;
height: 25px;
line-height: 25px;
text-align: center;
color: #FFFF66;
  }

.odd .name-active {
 width: 100%;
 height: 15px;
 line-height: 15px;
 text-align: center;
 font-size: x-small;
 color: #9a9a9a;
 }

.odd .value-active {
width: 100%;
height: 25px;
line-height: 25px;
text-align: center;
color: #000000;
}

如果我删除之前的 .odd，例如 .value-active，它会起作用!!!但我想把它作为 child 放在 .odd 的 css 中!!!

Answer 1

由于删除了 odd 并添加了 odd-active，因此您需要使用 odd-active 而不是 odd:

.odd-active .value-active { /*not .odd .value-active*/
width: 100%;
height: 25px;
line-height: 25px;
text-align: center;
color: #000000;
}