پنهان و نمایان کردن عناصر در jQuery
مثال - خودتان امتحان کنید
()hide
این مثال نشان می دهد که چگونه با کلیک روی تگ <p> آنرا مخفی کنیم.
()hide
این مثال نشان می دهد که چگونه یک تگ <div> را بصورت آهسته مخفی کنیم.
متدهای ()hide و ()show
در jQuery، با متدهای ()hide و ()show می توانید عناصر HTML را پنهان و نمایان کنید:
مثال (پنهان و نمایان کردن عناصر در jQuery)
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
نحوه استفاده:
$(selector).show(speed,callback);
پارامترها:
| پارامتر | توضیح |
|---|---|
| speed |
اختیاری است، سرعت پنهان یا نمایان شدن را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود. |
| callback |
اختیاری است، تابعی است که بعد از اجرای کامل متدهای ()hide و ()show اجرا می شود. (درباره تابع callback در مطالب بعدی بیشتر توضیح داده خواهد شد) |
در مثال زیر، پارامتر speed همراه با متد ()hide استفاده شده است:
مثال (پنهان و نمایان کردن عناصر در jQuery)
$("p").hide(1000);
});
متد ()toggle
با متد ()toggle می توانید بین متدهای ()hide و ()show حرکت کنید.
عناصر نمایان را پنهان و عناصر پنهان را نمایان می کند:
مثال (پنهان و نمایان کردن عناصر در jQuery)
$("p").toggle();
});
نحوه استفاده:
پارامترها:
| پارامتر | توضیح |
|---|---|
| speed |
اختیاری است، سرعت پنهان یا نمایان شدن را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود. |
| callback |
اختیاری است، تابعی است که بعد از اجرای کامل متدهای ()hide و ()show اجرا می شود. (درباره تابع callback در مطالب بعدی بیشتر توضیح داده خواهد شد) |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 27498
دیدگاه‌ها
با سلام.
من یه دکمه ساختم که وقتی روش کلیک شد با toggle یک متن به نمایش در میاد و وقتی روی دکمه کلیک شد دوباره پنهان میشه حالا چطور میشه کرد تا هرکجای صفحه کلیک شد متن پنهان بشه؟
سلام
$(document).ready(function(){
$("p").click(fu nction(){
$(this).hide();
});
});
با سلام ، میشه عناصر رو بصورت شرطی هم پنهان کرد ؟!
مثلا Select هایی که مقدار Optionشون "0" باشه ؟
من تعدادی combo box داخل صفحه دارم که میخوام وقتی مقدار یکیشون رو از مقدار پیشفرض (مثلا 0) تغییر میدم و میکنم (مثلا 1) بقیه combo box هایی که مقدارشون 0 هست رو مخفی کنه ...
با سلام
بله امکانش هست.
شما باید رویداد change رو برای این کار انتخاب کنید، البته تا جایی که اطلاع دارم در یه مرورگر این رویداد غیرفعال هست. در این رویداد کافیه مقدار فعلی انتخاب شده رو بگیرید و در شرط قرار بدید، اگر در شرط بود، عناصر موردنیاز رو ایجاد یا حذف کنید. توسط خاصیت display: none می‌تونید به المان‌های موردنظر استایل بدید.
نمیدونم چرا از شیوه جواب دادنتون خیلی خوشم اومد، حس کردم حق مطلب و رسوندین
سلام وخسته نباشید
چهارصفحه در صفحه index.html ایجاد کردم باآیدی های favorite1و favorite2وfavor ite3 وfavorite4
درون هرکدوم از صفحات - لیست ویو با حدود پانصد بصورت پنهان مانند نمونه زیرقراردادم
(هرکدام ازهاداخل یک لیست ویو است
زمانی که برای ورود به صفحات favorite برروی کلیک میکنم باتوجه به اینکه صفحات سنگین شده اندلذا زمانی طول میکشد تا صفحه بارگذاری شود
لطفا راهنمایی کنید که چکارمیتونم انجام بدم تا صفحه سریع با یک کلیک باز شود
(متاسفانه اسکریپت نویسی بلد نیستم)
با سلام و تشکر.
دوست عزیز متأسفانه نه کدی اومده و نه اینکه سؤالتون خیلی واضح هست.
به طور معمول زمانی که در صفحات htmlعناصر خیلی زیاد بشن،روی لود صفحه تأثیر می‌ذارن. مخصوصا اگه تو صفحه جاوااسکریپت هم اجرا بشه که روی این کندی تأثیر می‌ذارن.
برای اینکه کمی سرعت لود بالاتر بره، می‌تونید از صفحه بندی استفاده کنید. یعنی از هر کدوم تعداد 10 رکورد به نمایش بذارید، و با دکمه‌های صفحه‌بندی شده، کاربر رو به صفحات بعد راهنمایی کنید.
با سلام و وقت بخیر و تشکر از پاسخ گویی سریع...
بنا به نظر شما بنده این قطعه کد رو نوشتم.
setTimeout(func tion () { myTimer() } ,1000);
function myTimer(){
$(".divv").css( "background-ima ge","url(image/ 3.jpg)");
}
حالا من میخوام طی گذشت این زمان تصویر تغییر کنه.اینجا باید چیکار کنم؟ باید از حلقه استفاده کنم؟ و کجای کد باید حلقه یذارم؟
با سلام و تشکر.
از کد زیر استفاده کنید. هم کوتاه‌تر هست و هم اینکه درست کار میکنه. کد زیر بک‌گراند تگ body رو هر 5 ثانیه یک بار تغییر میدهد. کدی که بک گراند div رو تغییر میده رو به این بذارید.
<!DOCTYPE html>
<html>
<head>
<title>Ga llery</title >
<meta charset="u tf-8" />
<script>
window.setInterval(function(){
document.body.s tyle.background Color = '#'+Math.floor(Math.random()*16777215).toString(16);
}, 5000);
</script>
</head>
<body style="tex t-align: center;padding- top: 50px;">
</body>
</html>
با سلام و خسته نباشید.
ببخشید بنده میخواهم یه div ایجاد کنم و پس زمینه آن را عکس بذارم. تا اینجاشو بلدم.
حالا میخوام هر چند ثانیه یکبار این عکس تغییر کنه و یه عکس دیگه نشون داده بشه.
به نظرتون باید چیکار کنم؟
تشکر
با سلام و خسته نباشید.
شما باید توسط یک تابع بک‌گراند div موردنظر رو عوض کنید و توسط دستور setTimeout به تابع موردنظر interval بدید. با این کار طبق interval اون تابع هر چند ثانیه که شما براش تعریف کردید، یک بار اجرا شده و در هر بار اجرا بک‌گراند تصویر عوض میشه.
اگه با jQuery بنویسید، راحت‌ترید.
سلام اقای صلاحی و اقای پهلوان یه مشکلی تو کد هام بودش پیداش کردم
حل شد
نزدیک به یه هفتس که به هیچ کدوم از سوالا هیچ جوابی نمیدین کم کم دارم ناامید میشم از سوال پرسیدن
این متد toggle اذیتم میکنه من این کد رو قرار دادم در صفحم$(document).ready(function() {
$("#toggle").click(function(){
$(".tog").toggle()
});
});ولی وقتی رو دکمه کلیک میکنم عناطر رو پنهان میکنه ولی همزمان با پنهان کردن عنصرا صفحه هم یه بار رفرش میشه و عناصر دوباره به حالت show در میان
چرا اینطوریه خواهشا یکی جواب بده
من و همکارانم تلاشمون رو میکنم تا کاربران عزیز سایت سریعا جواب سؤال خودشون رو پیدا کنن. بنده خودم همین یکی دو روز پیش چند سؤال شما رو جواب دادم. اینطور یک جانبه قضاوت نکنید!!!
اما در مورد سؤالتون باید بگم که کدی نوشتید بی‌معنیه!!!
کجای کدش بی معنیه دقیق مث خود سایت نوشتمش فقط ای دی عناصر رو یه چیز دگ دادم من چطور پس تو slidetoggle جواب گرفتم بعد شما اینجا میگی بی معنیه دقیق مث خود سایت هستش گفتم عناصری که کلاس .tog دارن رو توگل کنه دگ
عجب والا شما یه هفته پیش جواب منو دادی و فقطم شما جواب میدی کس دگ کلا انگار اینجا نیس
من تو سایتای دگ سوال میپرسم زیر یه ساعت جواب میگیرم اینجا کل مبحث رو تموم میکنم تازه یه نفر اونم شما جواب میدید شاید این پیام تایید نشه ولی من حرفمو زدم سایت فوق العاده خوب و عالی و لی پسخگویی ضعیف و کند صورت میگیره
سلام دوست عزیز.
الآن زیر یه ساعته که جواب شما رو میدم.
لطفا کد کد صفحه رو بذارید تا ببینم مشکلش چیه. به علامتهای > و < دقت کنید.
سلام
کاربر محترم java، فرمودید که بعد از کلیک کردن روی دکمه با آی دی "toggle" صفحه Refresh می شه، احتمالاً شما از عنصر input با نوع Submit استفاده کرده اید که باعث Refresh شدن صفحه می شود، لطفاً بجای آن از عنصر زیر استفاده نمایید:
<button id="toggle">toggle</button>
لطفاً اگر مورد بالا را رعایت نموده اید، کد صفحه مورد نظر را به ایمیل [email protected] ارسال نمایید.
toggle رو لطفا بیشتر توضیح بدید
با سلام.
رویداد toggle بین دو افکت () show و افکت () hide تغییر وضعیت میدهد.
رویداد toggle وضعیت نمایش و یا عدم نمایش عنصر مورد نظر رابر روی صفحه میسنجد. اگر عنصر در حال نمایش باشد آن را با استفاده از متد Hide مخفی کرده و اگر عنصر مخفی باشد آن را با استفاده از متد Show نمایش میدهد. این متد برای عناصری که از ابتدای اجرای صفحه مخفی تعیین شده اند، کار نمیکند.
شکل کلی استفاده از این متد به شرح زیر است:
$(selector).tog gle(speed, easing, callback) ;
selector عنصر انتخابی هست. speed پارامتر اختیاری برای تنظیم سرعت که هست. پارامتر easing سرعت رو در انتها و ابتدای اجرای افکت تنظیم میکنه. callback هم تابعی هست که می‌تونید هنگام اجرای افکت اجرا کنید.
باید چندین مثال رو ببینید تا دقیقا متوجه بشید که چطور کار میکنه.
خسته نباشید
در دومین ()hide که ابتدای صفحه توضیح دادین
$(this).parents(".ex").hide("slow");
رو متوجه نمیشم
سلام
به کد زیر دقت کنید:
$(document).ready(function(){
$(".ex .hide").click(f unction(){
$(this).parents (".ex").hide("s low");
});
});
عبارت this به سلکتور بالایی اشاره می کنه، یعنی همان "ex. hide." و دستور parents به عنصر والد عنصر با کلاس hide، که همان عنصر با کلاس ex است اشاره می کنه و سپس به صورت slow یا همان آرام، این عنصر والد رو محو می کنه...
جالب و آسان
ممنون
سلام
ممنون . خیلی جالب بود. تو سبک w3c به زبان فارسی ...