jQuery class add/remove Bangla Tutorials

Jquery তে addClass() এবং removeClass() নামে দুটি method আছে।এগুলি দিয়ে আপনি যেকোন এলিমেন্টে একটা নতুন css class যোগ বা বাদ দিতে পারবেন।ওয়েব application তৈরীর সময় এরুপ প্রায়ই লাগে যে,কোন button ,tab ইত্যাদি কোথাও click বা Mouse হোভার করলে ডকুমেন্টের কোন অংশে সিএসএস পরিবর্তিত হবে।যেমন নিচের এরুপ একটা উদাহরন দিচ্ছি যেখানে একটা বাটনে click করলে তার নিচে প্যারাগ্রাফটির রং লাল হবে আবার অন্য বাটনটিতে ক্লিক করলে একই প্যারাগ্রাফটির color সবুজ হবে।

index.html ফাইল

01.<html>

02.<head>

03.<link rel="stylesheet" href="/style.css" type="text/css"/>

04.<script src="/jquery_latest.js" type="text/javascript"></script>

05.<script type="text/javascript">

06.$(document).ready(function(){

07.$('#colorRed').click(function(){

08.$('# spdoundationbd).addClass('redPara')

09..removeClass('greenPara');

10.});

11.$('#colorGreen').click(function(){

12.$('# spdoundationbd).addClass('greenPara')

13..removeClass('redPara');

14.});

15.});

16.</script>

17.</head>

18.<body>

19.<button id="colorRed">Click here for red color</button>

20.<button id="colorGreen">Click here for green color</button>

21.<p id=" spdoundationbd ">JQuery is a popular javascript framework</p>

22.</body>

23.</html>

Output:

Click here for red color Click here for green color

JQuery is a popular javascript framework

ব্যাখ্যা:এখানে Jquery কোডে দেখুন প্রথমে ডকুমেন্ট রেডি করে (ডকুমেন্ট রেডি করার Function গুলি নিয়ে আগের Tutorials গুলিতে আলোচনা হয়েছে) এরপর coloRed ID সম্বলিত বাটনটি সিলেক্ট করেছি এবং এখানে ক্লিক করলে spdoundationbd আইডি সম্বলিত প্যারাগ্রাফে একটি redPara নামে class যোগ হবে।addClass মেথডটিতে string হিসেবে যে প্যারামিটারটি পাঠাবেন সেটি হবে ক্লাসের নাম।

*জেকোয়েরিতে এভাবে একটা ID Select করার পর ডট চিহ্ন দিয়ে এর উপর চালানো মেথডটির নাম দিতে হয় যেমন আমি দিয়েছি $(‘# spdoundationbd).addClass(‘redPara’)

*কোন একটা সিলেক্টেড এলিমেন্টে একসাথে অনেকগুলি মেথড Operation চালাতে পারে যেমন আমি একসাথে দুটি মেথড (addClass এবং removeClass) চালিয়েছি spdoundationbd ID Select করে।$(‘# spdoundationbd).addClass(‘redPara’).removeClass(‘greenPara’);

*removeClass মেথডটিও addClass এর মতই, এই মেথডটি দিয়ে পুর্বে যোগকৃত ক্লাস মুছে দিতে পারেন।

যাইহোক এবার css ফাইলে নিচের কোডটুকু লিখুন।যেসমস্ত class যোগ হল সেগুলির জন্য যেকোন সিএসএস লিখুন।যেমন আমি লিখেছি।

style.css ফাইল

01.# spdoundationbd {

02.font-weight:bolder;

03.font-family:Verdana;

04.}

05..redPara{

06.color:#f00;

07.}

08..greenPara{

09.color:green;

10.}

এইটুকু ব্যাখ্যা হচ্ছে যখন colorRed ID সম্বলিত বাটনে কেউ click করবে।এরপর colorGreen বাটনে click করলে তার জন্য যে কোড লেখা হয়েছে সেটারও ব্যাখ্যা একই শুধু আইডি এবং ক্লাসের নাম পরিবর্তন হবে।

* তাহলে সবশেষে ফলাফল দাড়াচ্ছে colorRed বাটনে ক্লিক করলে spdoundationbd আইডি সম্বলিত প্যারাতে redPara নামে একটি ক্লাস যোগ হবে এবং greenPara নামের কোন class থাকলে সেটা মুছে যাবে (যে ক্লাস অপর বাটনটিতে click করলে যোগ হবে )।

 

এবং একইভাবে colorGreen বাটনে ক্লিক করলে spdoundationbd id সম্বলিত প্যারাতে greenPara নামে একটি class যোগ হবে এবং redPara নামের কোন ক্লাস থাকলে সেটা মুছে যাবে (যে class অপর বাটনটিতে click করলে যোগ হবে )।