javascript - 如果 ul li 类处于事件状态，jQuery 将一个类替换为另一个类

Question

我正在制作一个表单生成器，我想更改外观，例如内容的颜色。当类等于 active 时，文本应为白色，但当其余类不处于事件状态时，文本应为黑色。

如何使用生成的 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 完成的事情。

因此，无需使用 JavaScript 管理和更改类名，您只需添加或删除 li 上的属性 class=Active。现在，我给你的例子实际上是一个不好的例子。好的做法是像这样 .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;
}

编辑:如果您仍然希望按照自己的方式进行操作，请在此处为您准备 fiddle 。请记住将颜色更改为您想要的颜色! :)

JSFiddle