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 Attribute Selector，而不是使用两个不同的CSS类。此选择器应用于您希望在其上使用的CSS选择器，例如.game-star ul li[class=Active]。它告诉CSS查找名称为game-star的元素，该元素的子节点为ul，而ul的子节点为li WITH 属性class=Active。它可以很方便地简化必须使用JavaScript完成的工作。

因此，您只需在li上添加或删除属性class=Active，而不是使用JavaScript管理和更改类名。现在，我给你的例子实际上是一个不好的例子。好的做法是这样的.game-star ul li[data-active=Active]更像是一种正确的做法。你之所以不想在一个属性选择器中使用 CLASS ATTRIBUTE 的原因是什么原因？这是因为已经以这种方式构建... .game-star ul li.Active您可以将选择器，名称和ID组合在一起，以在目标上添加更多强调。您可以阅读更多相关信息here。

所以我的推荐是你的代码：

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/

如果ul li类处于活动状态，则jQuery将一个类替换为另一个类

3 个答案: