jQuery thay thế một lớp với lớp khác nếu lớp ul li đang hoạt động

Question

Tôi đang tạo trình tạo biểu mẫu, tôi muốn thay đổi giao diện, ví dụ màu của nội dung. Khi lớp tương đương với hoạt động sẽ nhận được một màu trắng của văn bản nhưng khi phần còn lại không hoạt động thì văn bản phải là màu đen thay thế.

Làm cách nào tôi có thể thực hiện việc này với 2 lớp đã tạo?

Dù sao tôi thấy một cái gì đó trên diễn đàn này, nhưng có vẻ như không làm việc cho tôi:

$('.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

Thay đổi phong cách của bạn để:

.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

Thay vì sử dụng hai lớp CSS khác nhau, bạn có thể sử dụng một và sử dụng các CSS Attribute Selector. Bộ chọn này được áp dụng cho bộ chọn CSS mà bạn muốn nó được sử dụng, ví dụ: .game-star ul li[class=Active]. Nó yêu cầu CSS tìm kiếm phần tử có tên là game-star có nút con là ul và ul có nút con là liWITH thuộc tính class=Active. Nó có ích để đơn giản hóa những thứ đã được thực hiện với JavaScript.

Vì vậy, thay vì quản lý và thay đổi tên lớp bằng JavaScript, bạn chỉ phải thêm hoặc xóa thuộc tính class=Active trên li của mình. Bây giờ, ví dụ tôi đã đưa cho bạn thực sự là một ví dụ thực hành tồi. Việc thực hành tốt sẽ là một cái gì đó như thế này .game-star ul li[data-active=Active] sẽ được nhiều hơn một thực hành chính xác. Lý do tại sao bạn không bao giờ muốn sử dụng CLASS ATTRIBUTE IN A SELECTOR ATTRIBUTE SELECTOR lý do tại sao? Vì nó đã được xây dựng theo cách này ... .game-star ul li.Active Bạn có thể ghép các bộ chọn, tên và id lại với nhau để thêm nhiều hơn nhấn mạnh vào mục tiêu của mình. Bạn có thể đọc thêm về nó here.

Vì vậy, đề nghị của tôi sẽ là này cho mã của bạn:

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: Nếu bạn vẫn muốn làm điều đó theo cách của bạn, ở đây trong một fiddle cho bạn. Hãy nhớ thay đổi màu sắc thành những gì bạn mong muốn! :)

JSFiddle

Answer 3

Tôi đã cập nhật mã. Các lớp học là như nhau. Hoạt động là màu trắng của văn bản và phần còn lại không hoạt động thì văn bản phải màu đen thay thế.

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