jQuery में toggleClass मेथड के साथ काम करना

एक उपयोगी मेथड toggleClass भी है, जो निर्दिष्ट क्लास को जोड़ेगा, अगर वह मौजूद नहीं है, और उसे हटा देगा अगर वह मौजूद है। यह तब उपयोगी हो सकता है जब एक ही बटन पर क्लिक करने से पेज के एलिमेंट में आवधिक परिवर्तन होते हैं।

आइए एक उदाहरण के साथ इस मेथड को देखें। मान लीजिए कि हमारे पास निम्नलिखित CSS स्टाइल्स हैं:

css.red {
  color: red;
}
  
.zzz {
  font-style: italic;
}

साथ ही एक पैराग्राफ है जिसमें zzz क्लास है:

html<p class="zzz" id="test">text</p>
<button>click</button>

आइए, उदाहरण के लिए, ऐसा करें कि बटन पर पहली बार क्लिक करने पर, एलिमेंट में red क्लास जोड़ा जाए, जो लाल रंग जोड़ता है, और दूसरी बार - यह क्लास हटा दिया जाएगा और लाल रंग गायब हो जाएगा। यदि फिर से बटन पर दबाया जाए - सब कुछ फिर से दोहराया जाएगा।

निम्नलिखित कोड चलाने का प्रयास करें और इसके प्रति आश्वस्त हों (zzz क्लास इटैलिक में दिखाता है, यह दिखाने के लिए कि toggleClass अन्य क्लासेस के काम करने में हस्तक्षेप नहीं करेगा):

javascript$('button').click(function() {
  $('#test').toggleClass('red');
});

पहली बार दबाने के बाद HTML कोड इस तरह दिखेगा (red क्लास जोड़ा जाएगा):

html<p class="zzz red" id="test">text</p>
<button>click</button>

और दूसरी बार दबाने के बाद - इस तरह (red क्लास गायब हो जाएगा):

html<p class="zzz" id="test">text</p>
<button>click</button>