জিকুয়েরিতে হ্যাশক্লাস () ফাংশন রয়েছে যা মোড়কে থাকা সেটের কোনও উপাদান নির্দিষ্ট শ্রেণিভুক্ত থাকলে সত্য হয়
if (!$(this).hasClass("selected")) {
//do stuff
}
আমার ব্যবহারের উদাহরণটি একবার দেখুন
- যদি আপনি একটি ডিভের উপরে ঘোরাফেরা করেন তবে ডিভটিতে 'নির্বাচিত' শ্রেণিটি না থাকলে এটি 100% অস্বচ্ছতার সাথে স্বাভাবিক গতি হিসাবে ম্লান হয়ে যায়
- যদি আপনি একটি ডিভের বাইরে চলে যান তবে ডিভটিতে 'নির্বাচিত' শ্রেণিটি না থাকলে ধীর গতিতে 30% অস্বচ্ছ হয়ে যায়
- বোতামটি ক্লিক করা হলে লাল ডিভের জন্য 'নির্বাচিত' শ্রেণি যুক্ত হয়। বিবর্ণ প্রভাব আর রেড ডিভের জন্য আর কাজ করে না
এটির জন্য কোডটি এখানে
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #FFF; font: 16px Helvetica, Arial; color: #000; }
</style>
<!-- jQuery code here -->
<script type="text/javascript">
$(function() {
$('#myButton').click(function(e) {
$('#div2').addClass('selected');
});
$('.thumbs').bind('click',function(e) { alert('You clicked ' + e.target.id ); } );
$('.thumbs').hover(fadeItIn, fadeItOut);
});
function fadeItIn(e) {
if (!$(e.target).hasClass('selected'))
{
$(e.target).fadeTo('normal', 1.0);
}
}
function fadeItOut(e) {
if (!$(e.target).hasClass('selected'))
{
$(e.target).fadeTo('slow', 0.3);
}
}
</script>
</head>
<body>
<div id="div1" class="thumbs" style=" background-color: #0f0; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both;">
One div with a thumbs class
</div>
<div id="div2" class="thumbs" style=" background-color: #f00; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both;">
Another one with a thumbs class
</div>
<input type="button" id="myButton" value="add 'selected' class to red div" />
</body>
</html>
সম্পাদনা করুন:
এটি কেবল অনুমান, তবে আপনি কি এই জাতীয় কিছু অর্জনের চেষ্টা করছেন ?
- উভয় ডিভ 30% অস্বচ্ছতা থেকে শুরু করে
- একটি ডিভের উপর 100% অস্বচ্ছতার উপর ঝাঁকুনির সাথে 30% অস্বচ্ছতা ফিরে আসে ades বিবর্ণ প্রভাবগুলি কেবলমাত্র সেই উপাদানগুলিতে কাজ করে যেগুলির 'নির্বাচিত' শ্রেণি নেই
- একটি ডিভ ক্লিক করলে 'নির্বাচিত' শ্রেণি যুক্ত / সরানো হয়
jQuery কোড এখানে-
$(function() {
$('.thumbs').bind('click',function(e) { $(e.target).toggleClass('selected'); } );
$('.thumbs').hover(fadeItIn, fadeItOut);
$('.thumbs').css('opacity', 0.3);
});
function fadeItIn(e) {
if (!$(e.target).hasClass('selected'))
{
$(e.target).fadeTo('normal', 1.0);
}
}
function fadeItOut(e) {
if (!$(e.target).hasClass('selected'))
{
$(e.target).fadeTo('slow', 0.3);
}
}
<div id="div1" class="thumbs" style=" background-color: #0f0; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both; cursor:pointer;">
One div with a thumbs class
</div>
<div id="div2" class="thumbs" style=" background-color: #f00; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both; cursor:pointer;">
Another one with a thumbs class
</div>