জেকুয়েরি toggleClass() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
toggleClass() মেথড নির্বাচিত এলিমেন্ট থেকে একা বা একাধিক ক্লাসের নাম যুক্ত করা এবং মুছে ফেলার মধ্যে টোগল করে।
এই মেথডটি উল্লিখিত ক্লাসের জন্য প্রতিটি উপাদানকে চেক করে। যদি ক্লাসের নাম যুক্ত না থাকে তাহলে যুক্ত করে, এবং যদি ইতিমধ্যে সেট করা হয় তাহলে মুছে ফেলে - এটি একটি টোগল ইফেক্ট সৃষ্টি করে।
যাইহোক, switch প্যারামিটার ব্যবহারের মাধ্যমে আপনি একটি ক্লাসের নাম শুধুমাত্র মুছে ফেলতে অথবা শুধুমাত্র যুক্ত করতে পারবেন।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).toggleClass(classname,function(index,currentclass),switch)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে toggleClass() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
classname |
আবশ্যক। যে ক্লাসটি যুক্ত বা মুছে ফেলা হবে সেটিকে নির্দেশ করে। একের অধিক ক্লাস উল্লেখ করার জন্য, একটি স্পেস দিয়ে ক্লাসের নাম আলাদা করতে হয়। |
function (index,currentclass) |
ঐচ্ছিক। একটি ফাংশন উল্লেখ করে যা এক বা একাদিক ক্লাস নাম যুক্ত করতে/মুছে ফেলতে রিটার্ন করে।
|
switch |
ঐচ্ছিক। একটি বুলিয়ান মান উল্লেখ করে, যেটি নির্দিষ্ট করে যে, শুধুমাত্র ক্লাস যুক্ত করা হবে (true), নাকি শুধুমাত্র মুছে ফেলা হবে (false)। |
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script>
<style>
.main {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<button>p এলিমেন্টের জন্য Toggle ক্লাস "main"</button>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য একটি প্যারাগ্রাফ।</p>
<p><b>নোটঃ</b> টগল(toggle) প্রভাব দেখতে বাটন একবারের বেশি ক্লিক করুন
</p>
</body>
</html>
ফলাফল
উদাহরণ
ক্লাস যুক্ত অথবা মুছে ফেলার মধ্যে টোগল
একটি ক্লাস যুক্ত করা এবং মুছে ফেলার মধ্যে টোগল করতে কিভাবে toggleClass() মেথড ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script>
<style>
.main {
font-size: 120%;
color: green;
}
</style>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ</p>
<p class="main">এটি আরেকটি প্যারাগ্রাফ</p>
<button>p এলিমেন্টের জন্য "main" টোগল ক্লাস ব্যবহার করুন</button>
</body>
</html>
ফলাফল
ফাংশন ব্যবহার করে ক্লাসনেম টোগল
একটি ফাংশন ব্যবহার করে কিভাবে নির্বাচিত এলিমেন্টের জন্য কোন ক্লাস নাম যুক্ত করা এবং মুছে ফেলার মধ্যে টোগল করা হয়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("li").toggleClass(function(n){
return "listitem_" + n;
});
});
});
</script>
<style>
.listitem_1, .listitem_3 {
color: green;
}
.listitem_0, .listitem_2 {
color: pink;
}
</style>
</head>
<body>
<h3>এটি একটি হেডিং</h3>
<ul>
<li>ইমরান</li>
<li>জিহাদ</li>
<li>শরীফ</li>
<li>পরাণ</li>
</ul>
<button>লিস্ট আইটেমে ক্লাস যুক্ত বা রিমুভ করুন।</button>
</body>
</html>
ফলাফল
switch প্যারামিটারের ব্যবহার
শুধুমাত্র একটি ক্লাস নাম যুক্ত অথবা মুছ ফেলতে কিভাবে switch প্যারামিটার ব্যবহার করা যায়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#add").click(function(){
$("p").toggleClass("main",true);
});
$("#remove").click(function(){
$("p").toggleClass("main",false);
});
});
</script>
<style>
.main {
font-size: 120%;
color: green;
}
</style>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p class="main">এটি অন্য একটি প্যারাগ্রাফ।</p>
<button id="add"> "main" ক্লাস সংযোজন</button>
<button id="remove"> "main" ক্লাস বিয়োজন</button>
</body>
</html>
ফলাফল
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ