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>