در مرحله بعد می‌خواهیم کاری کنیم که تنها با قرار گرفتن اشاره‌گر ماوس بر روی هر تصویر، کپشن آن نمایش داده شود. اولین قدم برای انجام این کار پنهان کردن کپشن‌ها است:
$("figcaption").hide();
ساده و زیبا! اما در ادامه کار ما اندکی پیچیده‌تر خواهد شد. حال باید کاری کنیم که هر المان figure رفتار مورد نظر خود را داشته باشد؛ رفتار مورد نظر ما این است که با قرارگیری ماوس بر روی figure مورد نظر تنها کپشن مربوط به آن figure نمایش داده شود. برای این کار می‌توان از عمل‌گر each() استفاده کرد:
$("figure").each(function(){
//add the behavior for each figure here
});
بیایید داستان را روشن‌تر کنیم، برای هر figure می‌خواهیم:
- زمانی که ماوس بر figure قرار گرفت تگ figcaption مربوط به تصویر را نمایش دهد.
- زمانی که ماوس را از روی figure برداشتیم تگ figcaption دوباره پنهان شود.
حالا این دو مورد را به کدهایی قابل فهم برای jQuery تبدیل خواهیم کرد.
$("figure").each(function(){
$(this).hover(function(){
$(this).find("figcaption").show();
},function(){
$(this).find("figcaption").hide();
});
});
لازم به یادآوری است که در این مرحله اگر دقیقا متوجه روند انجام کار نشدید نباید بترسید؛ با این مثال تنها باید یک حسی از فرآیند انجام شده به دست آورید نه بیشتر.
به دو مورد بالا توجه کنید و سپس به کد jQuery نوشته شده نگاه کنید. سعی کنید روند منطقی مطرح شده در دو مورد بالا را با کد نوشته شده تطبیق دهید. گاهی وقت‌ها نوشتن یک کد jQuery خوب نیازی به داشتن دانش کاملی از دستورها ندارد، بلکه باید بتوان میان منطق و قدم‌های لازم برای انجام کار رابطه‌ای برقرار کرد. اگر بتوانید این کار را به درستی انجام دهید دیگر با jQuery هیچ مشکلی نخواهید داشت.
با این‌که کد نوشته شده ما کاملا درست است اما می‌توان دستی دیگر بر روی آن کشید. قرار گرفتن ماوس بر روی یک تصویر و برداشتن آن سبب نشان‌دادن/پنهان شدن بی‌وقفه کپشن‌ها خواهد شد. می‌توانیم این فرآیند را اندکی نرم‌تر کنیم. با استفاده از افکت‌های slideUp و slideDown موجود در jQuery و تعریف یک زمان مشخص می‌توانیم به هدف خود دست یابیم:
$("figure").each(function(){
$(this).hover(function(){
$(this).find("figcaption").slideDown('medium');
},function(){
$(this).find("figcaption").slideUp('medium');
});
});
با اضافه کردن این Script به Common.js در کنار کدهای مربوط به متون راهنمای فرم، کد jQuery کامل ما به این صورت در می‌آید:
$(document).ready(function(){
//Enhancing the form with helper text
$("#contactname").val("Please enter your full name");
$("#telephone").val("Incl local dialling code");
$("#eventdate").val("Format DDMMYYYY");
$("#details").val("The more you can enter here, the less we have
to check with you :)");
$("input, textarea").focus(function(){
$(this).select();
});
//Making the gallery captions appear on hover
$("figcaption").hide();
$("figure").each(function(){
$(this).hover(function(){
$(this).find("figcaption").slideDown('medium');
},function(){
$(this).find("figcaption").slideUp('medium');
});
});
});
اگر کد مربوط را کپی کردید و مطمئن هستید که دقیقا مانند آن چیزی است که در بالا برای شما نشان دادیم می‌توانید فایل common.js را ذخیره کرده و صفحه گالری خود را درون مرورگر بررسی کنید. تمیز و زیبا است نه؟!
اگر مشکلی پیش آمد و نتیجه دقیق نگرفتید می‌توانید به آرشیو کدهای کتاب رجوع کنید و این کد را از آن‌جا بردارید:
chapter11/website_files/02_GalleryCaptionHoverEffect)
