জেকোয়েরি নতুন ক্লাস যোগ/মোছা (jQuery class add/remove)

 



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

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.$('#codestrickz').addClass('redPara')
09..removeClass('greenPara');
10.});
11.$('#colorGreen').click(function(){
12.$('#codestrickz').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="codestrickz">JQuery is a popular javascript framework</p>
22.</body>
23.</html>

আউটপুট:


 

JQuery is a popular javascript framework

ব্যাখ্যা:এখানে জেকোয়েরি কোডে দেখুন প্রথমে ডকুমেন্ট রেডি করে (ডকুমেন্ট রেডি করার ফাংশনগুলি নিয়ে আগের টিউটোরিয়ালগুলিতে আলোচনা হয়েছে) এরপর coloRed আইডি সম্বলিত বাটনটি সিলেক্ট করেছি এবং এখানে ক্লিক করলে codestrickz আইডি সম্বলিত প্যারাগ্রাফে একটি redPara নামে ক্লাস যোগ হবে।addClass মেথডটিতে স্ট্রিং হিসেবে যে প্যারামিটারটি পাঠাবেন সেটি হবে ক্লাসের নাম।


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


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


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

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

style.css ফাইল

01.#codestrickz{
02.font-weight:bolder;
03.font-family:Verdana;
04.}
05..redPara{
06.color:#f00;
07.}
08..greenPara{
09.color:green;
10.}

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


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

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

Post a Comment

Cookie Consent
Little Blog serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the data/wifi internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.