jQuery заменить один класс другим, если активен класс ul li

Question

Я создаю построитель форм, я хотел бы изменить внешний вид, например цвет содержимого. Когда класс, равный активному, должен получить белый цвет текста, но если остальные не активны, текст должен быть черным вместо этого.

Как это сделать сгенерированный класс 2?

Во всяком случае, я нашел что-то на этом форуме, но это, кажется, не работает для меня:

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

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

 
.game-star2 ul li h3 { 
 
\t font-size:14px; 
 
\t color:#fff; 
 
\t line-height:24px; 
 
\t float:left; 
 
\t font-weight:100; 
 
\t 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

Измените свой стиль:

.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 2

Вместо использования двух различных классов CSS, вы можете использовать один и использовать CSS Attribute Selector. Этот селектор применяется к селектору CSS, который вы хотите использовать, например, .game-star ul li[class=Active]. Это сказать CSS искать элемент с именем game-star, который имеет дочерний узел ul и ul, который имеет дочерний узел liС атрибутом class=Active. Это очень удобно для упрощения работы с JavaScript.

Таким образом, вместо управления и изменения имен классов с помощью JavaScript вы должны только добавить или удалить атрибут class=Active на свой ли. Теперь, пример, который я вам дал, на самом деле является примером плохой практики. Хорошей практикой было бы что-то вроде этого. .game-star ul li[data-active=Active] было бы более правильной практикой. Причина, по которой вы никогда не хотите использовать класс CLASS ATTRIBUTE в ATTRIBUTE SELECTOR, почему? Это потому, что уже построено таким образом ... .game-star ul li.Active Вы можете комбинировать селектор, имя и идентификатор вместе, чтобы добавить больше упор на вашу цель. Вы можете узнать больше об этом 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; 
} 

EDIT: Если вы все еще хотите сделать это по-своему, здесь в скрипка для твоей. Не забывайте менять цвета так, как вам хочется! :)

JSFiddle

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/