如果ul li類處於活動狀態，則jQuery將一個類替換為另一個類

Question

我正在制作一個表單構建器，我想改變外觀，例如內容的顏色。 當等於活動的類應該獲得文本的白色但是當其余的不活動時，文本應該是黑色的。

如何用生成的2類做到這一點？

無論如何，我在這個論壇上找到了一些東西，但似乎對我不起作用：

  $('.game-star').addClass('game-star2').removeClass('game-star'); 

 .game-star ul li h3 { font-size:14px; color:#fff; line-height:24px; float:left; font-weight:100; margin-top:8px; } .game-star2 ul li h3 { font-size:14px; color:#fff; line-height:24px; float:left; font-weight:100; margin-top:8px; } 

 <div class="game-star" style="height: 198px; overflow: hidden;"> <ul> <li class="Active"> <div class="game-star-icon"></div> <!-- <img src="../images/sideGameMenu1.png"/ class="winner-nameMoolar" "> --> <h3 class="winner-name">Major Millions<br> RMB 1000.00</h3> <!-- <p>RMB 625.78</p> --> </li> <li> <div class="game-star-icon"></div> <h3 class="winner-name">Major Moolah<br> RMB 3,266.41</h3> <!-- <p></p> --> </li> <li> <div class="game-star-icon"></div> <h3 class="winner-name">Major Moolah Isis<br> RMB 4,982.78</h3> <!-- <p></p> --> </li> <li> <div class="game-star-icon"></div> <h3 class="winner-name">發大財<br> RMB 8,888.88</h3> <!-- <p>RMB 396.42</p> --> </li> <li> <div class="game-star-icon"></div> <h3 class="winner-name">我發我發我發發發<br> RMB 9,999.99</h3> <!-- <p>RMB 28.89</p> --> </li> </ul> </div> my CSS : 

Answer 1

您可以使用一個並使用CSS屬性選擇器 ，而不是使用兩個不同的CSS類。 此選擇器應用於您希望它使用的CSS選擇器，例如.game-star ul li[class=Active] 。 它告訴CSS來尋找與名稱的元素game-star擁有的子節點ul和ul擁有的子節點li 與屬性class=Active 。 它可以很方便地簡化必須使用JavaScript完成的工作。

因此，您不必使用JavaScript管理和更改類名，而只需在li上添加或刪除屬性class=Active 。 現在，我給你的例子實際上是一個不好的例子。 好的做法是這樣的.game-star ul li[data-active=Active]更像是一種正確的做法。 你之所以不想在一個屬性選擇器中使用CLASS ATTRIBUTE的原因是什么原因？ 因為它已經以這種方式構建了...... .game-star ul li.Active你可以將選擇器，名稱和id組合在一起，以增加對目標的強調 。 你可以在這里閱讀更多相關信息。

所以我的推薦是你的代碼：

HTML

    <div class="game-star" style="height: 198px; overflow: hidden;">

<ul>
    <li data-active="true">
        <div class="game-star-icon"></div>
        <!-- <img src="../images/sideGameMenu1.png"/ class="winner-nameMoolar" "> -->   
        <h3 class="winner-name">Major Millions<br>RMB 1000.00</h3>

        <!-- <p>RMB 625.78</p> -->
    </li>
    <li>
        <div class="game-star-icon"></div> 
        <h3 class="winner-name">Major Moolah<br>RMB 3,266.41</h3>
        <!-- <p></p> -->
    </li>
    <li>
        <div class="game-star-icon"></div>
        <h3 class="winner-name">Major Moolah Isis<br>RMB 4,982.78</h3>
        <!-- <p></p> -->
    </li>
    <li>
        <div class="game-star-icon"></div>
        <h3 class="winner-name">發大財<br>RMB 8,888.88</h3>
        <!-- <p>RMB 396.42</p> -->
    </li>
    <li>
        <div class="game-star-icon"></div>
        <h3 class="winner-name">我發我發我發發發<br>RMB 9,999.99</h3>
        <!-- <p>RMB 28.89</p> -->
    </li>

</ul>
</div>

CSS

.game-star ul li[data-active=true] h3 {
    font-size:14px;
    color:#fff;
    line-height:24px;
    float:left;
    font-weight:100;
    margin-top:8px;
}

編輯：如果你仍然希望按照自己的方式去做，那么這里就是你的小提琴。 記得把顏色改成你想要的顏色！ :)

的jsfiddle

Answer 2

將你的風格改為：

.game-star  ul li,.game-star2  ul li {
    font-size:14px;
    color:#000;
    line-height:24px;
    float:left;
    font-weight:100;
    margin-top:8px;
}

.game-star ul li.Active,.game-star2  ul li.Active{
    color:#fff;
}

Answer 3

我更新了代碼。 班級是平等的。 活動是文本的白色，其余的不活動，文本應該是黑色的。

.game-star  ul li h3,
.game-star2  ul li h3{
    font-size:14px;
    color:#000;
    line-height:24px;
    float:left;
    font-weight:100;
    margin-top:8px;
}

.game-star  ul li.active h3,
.game-star2  ul li.active h3 {
    color:#fff;
}

http://jsfiddle.net/pyjuk106/2/