jQuery एक वर्ग को दूसरे के साथ प्रतिस्थापित करता है यदि उल ली क्लास सक्रिय है

मैं एक फॉर्म बिल्डर बना रहा हूं, मैं उपस्थिति को बदलना चाहता हूं, उदाहरण के लिए सामग्री का रंग। जब कक्षा के बराबर कक्षा को पाठ का एक सफेद रंग मिलना चाहिए, लेकिन जब बाकी सक्रिय नहीं होते हैं तो टेक्स्ट को काला होना चाहिए।jQuery एक वर्ग को दूसरे के साथ प्रतिस्थापित करता है यदि उल ली क्लास सक्रिय है

मैं जेनरेट 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 :

स्रोत

2016-09-26 Morgan Ng

यह दो सीएसएस वर्गों होने के लिए है? या यह ऐसा कुछ हो सकता है ... '.game-star उल li [वर्ग = सक्रिय] h3 {...}' – Matthew

यह मेरे लिए ठीक काम कर रहा है। यदि कोई त्रुटि है, तो क्या आपने कंसोल की जांच की? – Jows

jQuery ('। Game-star') आज़माएं। AddClass ('game-star2')।removeClass ('खेल-स्टार'); – Jows

बदलें करने के लिए अपनी शैली:

.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; 
}

स्रोत

2016-09-26 05:24:16

हाय अपने कोड को jQuery का उपयोग किये बिना पूरी तरह से काम कर सैंडिप करें, बहुत बहुत धन्यवाद –

दो अलग सीएसएस वर्गों का उपयोग करने के बजाय, आप एक का उपयोग करें और CSS Attribute Selector उपयोग कर सकते हैं। यह चयनकर्ता उस सीएसएस चयनकर्ता पर लागू होता है जिसे आप उपयोग करना चाहते हैं, उदाहरण के लिए .game-star ul li[class=Active]। यह एक ulclass=Active की विशेषता के साथ liका एक बच्चा नोड है कि game-starul का एक बच्चा नोड है के नाम के साथ एक तत्व और देखने के लिए सीएसएस बताओ। यह उन चीजों को सरल बनाने के लिए आसान है जो जावास्क्रिप्ट के साथ किए जाने थे।

तो जावास्क्रिप्ट के साथ कक्षा के नामों को प्रबंधित करने और बदलने के बजाय, आपको केवल अपनी ली पर विशेषता class=Active को जोड़ना या निकालना होगा। अब, मैंने जो उदाहरण दिया है वह वास्तव में एक बुरा अभ्यास उदाहरण है। अच्छा अभ्यास कुछ ऐसा होगा जैसे .game-star ul li[data-active=Active] एक सही अभ्यास होगा। इसका कारण यह है कि आप कभी भी क्लास अटैब्यूट का उपयोग एक अटूट ब्यूरो क्यों नहीं करना चाहते हैं? ऐसा इसलिए है क्योंकि यह पहले से ही इस तरह से बनाया गया है ... .game-star ul li.Active आप अपने लक्ष्य पर जोर जोड़ने के लिए चयनकर्ताओं, नाम और आईडी को एक साथ जोड़ सकते हैं। आप इसके बारे में here और अधिक पढ़ सकते हैं।

तो मेरी सिफारिश अपने कोड के लिए यह होगा:

एचटीएमएल

<div class="game-star" style="height: 198px; overflow: hidden;"> <ul> <li data-active="true"> <div class="game-star-icon"></div>  <h3 class="winner-name">Major Millions<br>RMB 1000.00</h3>  </li> <li> <div class="game-star-icon"></div> <h3 class="winner-name">Major Moolah<br>RMB 3,266.41</h3>  </li> <li> <div class="game-star-icon"></div> <h3 class="winner-name">Major Moolah Isis<br>RMB 4,982.78</h3>  </li> <li> <div class="game-star-icon"></div> <h3 class="winner-name">发大财<br>RMB 8,888.88</h3>  </li> <li> <div class="game-star-icon"></div> <h3 class="winner-name">我发我发我发发发<br>RMB 9,999.99</h3>  </li> </ul> </div>

सीएसएस

.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

स्रोत

2016-09-26 04:46:13 Matthew

हाय मैट, आपका कोड काम नहीं कर रहा है क्योंकि यह सेट करता है क्योंकि यह शब्द सफ़ेद हो जाता है, कक्षा भी सक्रिय –

के बराबर नहीं है, ठीक है, यहां पर यह तरीका है कि आप इसे कैसे करना चाहते थे। [JSFiddle] (https://jsfiddle.net/4ob3ux85/) – Matthew

-2

मैं कोड अपडेट किया गया। कक्षा बराबर है। सक्रिय पाठ का सफ़ेद रंग होता है और शेष सक्रिय नहीं होते हैं, पाठ को इसके बजाय काला होना चाहिए।

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

स्रोत

2016-09-26 04:46:40 Jows

नहीं, कोड ठीक चलाता है। मैं बस बेवकूफ का उपयोग करें। यदि आप निरीक्षण को देखते हैं, तो यह ** तत्व का नाम बदलता है, लेकिन यदि आप सीएसएस को देखते हैं, तो यह वही है, इसलिए यह केवल * दिखता है * जैसे कुछ भी नहीं बदल रहा है। यहां मेरी पहेली है ताकि आप देख सकें। [JSFiddle] (https://jsfiddle.net/o583tc0q/) मैंने अपनी पहेली को भी अपडेट किया ताकि अगर वे इस तरह से चुनते हैं तो यह काम करेगा। – Matthew

मैंने कोड अपडेट किया। कक्षा बराबर है। सक्रिय पाठ का सफ़ेद रंग होता है और शेष सक्रिय नहीं होते हैं, पाठ को इसके बजाय काला होना चाहिए। https://jsfiddle.net/pyjuk106/2/ – Jows

jQuery एक वर्ग को दूसरे के साथ प्रतिस्थापित करता है यदि उल ली क्लास सक्रिय है

उत्तर

संबंधित मुद्दे