سبد خرید (0)

تبلیغات

پنهان و نمایان کردن عناصر در jQuery

مثال

مثال - خودتان امتحان کنید

()hide
این مثال نشان می دهد که چگونه با کلیک روی تگ <p> آنرا مخفی کنیم.

()hide
این مثال نشان می دهد که چگونه یک تگ <div> را بصورت آهسته مخفی کنیم.


متدهای ()hide و ()show

در jQuery، با متدهای ()hide و ()show می توانید عناصر HTML را پنهان و نمایان کنید:

مثال (پنهان و نمایان کردن عناصر در jQuery)

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});
خودتان امتحان کنید »

نحوه استفاده:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

پارامترها:

پارامترتوضیح
 speed

اختیاری است، سرعت پنهان یا نمایان شدن را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود.

callback

اختیاری است، تابعی است که بعد از اجرای کامل متدهای ()hide و ()show اجرا می شود. (درباره تابع callback در مطالب بعدی بیشتر توضیح داده خواهد شد)

در مثال زیر، پارامتر speed همراه با متد ()hide استفاده شده است:

مثال (پنهان و نمایان کردن عناصر در jQuery)

$("button").click(function(){
  $("p").hide(1000);
});
خودتان امتحان کنید »

متد ()toggle

با متد ()toggle می توانید بین متدهای ()hide و ()show حرکت کنید.

عناصر نمایان را پنهان و عناصر پنهان را نمایان می کند:

مثال (پنهان و نمایان کردن عناصر در jQuery)

$("button").click(function(){
  $("p").toggle();
});
خودتان امتحان کنید »

نحوه استفاده:

$(selector).toggle(speed,callback);

پارامترها:

پارامترتوضیح
 speed

اختیاری است، سرعت پنهان یا نمایان شدن را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود.

callback

اختیاری است، تابعی است که بعد از اجرای کامل متدهای ()hide و ()show اجرا می شود. (درباره تابع callback در مطالب بعدی بیشتر توضیح داده خواهد شد)

jQuery Effects Reference

For a complete overview of all jQuery effects, please go to our jQuery Effect Reference.

دیدگاه‌ها  

+1 # mionel 1396-06-05 19:12
با سلام.
من یه دکمه ساختم که وقتی روش کلیک شد با toggle یک متن به نمایش در میاد و وقتی روی دکمه کلیک شد دوباره پنهان میشه حالا چطور میشه کرد تا هرکجای صفحه کلیک شد متن پنهان بشه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1396-06-06 11:48
سلام
$(document).ready(function(){
$("p").click(fu nction(){
$(this).hide();
});
});
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # Milad 1395-07-07 14:05
با سلام ، میشه عناصر رو بصورت شرطی هم پنهان کرد ؟!
مثلا Select هایی که مقدار Optionشون "0" باشه ؟
من تعدادی combo box داخل صفحه دارم که میخوام وقتی مقدار یکیشون رو از مقدار پیشفرض (مثلا 0) تغییر میدم و میکنم (مثلا 1) بقیه combo box هایی که مقدارشون 0 هست رو مخفی کنه ...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1395-07-14 17:43
با سلام
بله امکانش هست.
شما باید رویداد change رو برای این کار انتخاب کنید، البته تا جایی که اطلاع دارم در یه مرورگر این رویداد غیرفعال هست. در این رویداد کافیه مقدار فعلی انتخاب شده رو بگیرید و در شرط قرار بدید، اگر در شرط بود، عناصر موردنیاز رو ایجاد یا حذف کنید. توسط خاصیت display: none می‌تونید به المان‌های موردنظر استایل بدید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # ایمان کریمی 1396-04-13 11:17
نمیدونم چرا از شیوه جواب دادنتون خیلی خوشم اومد، حس کردم حق مطلب و رسوندین
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # mohammad 1394-11-17 00:06
سلام وخسته نباشید
چهارصفحه در صفحه index.html ایجاد کردم باآیدی های favorite1و favorite2وfavor ite3 وfavorite4
درون هرکدوم از صفحات - لیست ویو با حدود پانصد بصورت پنهان مانند نمونه زیرقراردادم




(هرکدام ازهاداخل یک لیست ویو است
زمانی که برای ورود به صفحات favorite برروی کلیک میکنم باتوجه به اینکه صفحات سنگین شده اندلذا زمانی طول میکشد تا صفحه بارگذاری شود
لطفا راهنمایی کنید که چکارمیتونم انجام بدم تا صفحه سریع با یک کلیک باز شود
(متاسفانه اسکریپت نویسی بلد نیستم)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-11-17 20:55
با سلام و تشکر.
دوست عزیز متأسفانه نه کدی اومده و نه اینکه سؤالتون خیلی واضح هست.
به طور معمول زمانی که در صفحات html‌عناصر خیلی زیاد بشن،‌روی لود صفحه تأثیر می‌ذارن. مخصوصا اگه تو صفحه جاوااسکریپت هم اجرا بشه که روی این کندی تأثیر می‌ذارن.

برای اینکه کمی سرعت لود بالاتر بره، می‌تونید از صفحه بندی استفاده کنید. یعنی از هر کدوم تعداد 10 رکورد به نمایش بذارید، و با دکمه‌های صفحه‌بندی شده، کاربر رو به صفحات بعد راهنمایی کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # ملیحه 1394-11-16 12:31
با سلام و وقت بخیر و تشکر از پاسخ گویی سریع...
بنا به نظر شما بنده این قطعه کد رو نوشتم.
setTimeout(func tion () { myTimer() } ,1000);
function myTimer(){
$(".divv").css( "background-ima ge","url(image/ 3.jpg)");
}

حالا من میخوام طی گذشت این زمان تصویر تغییر کنه.اینجا باید چیکار کنم؟ باید از حلقه استفاده کنم؟ و کجای کد باید حلقه یذارم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-11-16 17:02
با سلام و تشکر.
از کد زیر استفاده کنید. هم کوتاه‌تر هست و هم اینکه درست کار می‌کنه. کد زیر بک‌گراند تگ 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>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # ملیحه 1394-11-15 12:01
با سلام و خسته نباشید.
ببخشید بنده میخواهم یه div ایجاد کنم و پس زمینه آن را عکس بذارم. تا اینجاشو بلدم.
حالا میخوام هر چند ثانیه یکبار این عکس تغییر کنه و یه عکس دیگه نشون داده بشه.
به نظرتون باید چیکار کنم؟
تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-11-15 22:52
با سلام و خسته نباشید.
شما باید توسط یک تابع بک‌گراند div موردنظر رو عوض کنید و توسط دستور setTimeout به تابع موردنظر interval بدید. با این کار طبق interval اون تابع هر چند ثانیه که شما براش تعریف کردید، یک بار اجرا شده و در هر بار اجرا بک‌گراند تصویر عوض میشه.
اگه با jQuery بنویسید، راحت‌ترید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # java 1394-08-11 17:21
سلام اقای صلاحی و اقای پهلوان یه مشکلی تو کد هام بودش پیداش کردم
حل شد
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # java 1394-08-10 17:39
نزدیک به یه هفتس که به هیچ کدوم از سوالا هیچ جوابی نمیدین کم کم دارم ناامید میشم از سوال پرسیدن
این متد toggle اذیتم میکنه من این کد رو قرار دادم در صفحم$(document).ready(function() {
$("#toggle").click(function(){
$(".tog").toggle()
});
});
ولی وقتی رو دکمه کلیک میکنم عناطر رو پنهان میکنه ولی همزمان با پنهان کردن عنصرا صفحه هم یه بار رفرش میشه و عناصر دوباره به حالت show در میان


چرا اینطوریه خواهشا یکی جواب بده
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-08-10 20:42
من و همکارانم تلاشمون رو می‌کنم تا کاربران عزیز سایت سریعا جواب سؤال خودشون رو پیدا کنن. بنده خودم همین یکی دو روز پیش چند سؤال شما رو جواب دادم. اینطور یک جانبه قضاوت نکنید!!!

اما در مورد سؤالتون باید بگم که کدی نوشتید بی‌معنیه!!!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # java 1394-08-11 10:50
کجای کدش بی معنیه دقیق مث خود سایت نوشتمش فقط ای دی عناصر رو یه چیز دگ دادم من چطور پس تو slidetoggle جواب گرفتم بعد شما اینجا میگی بی معنیه دقیق مث خود سایت هستش گفتم عناصری که کلاس .tog دارن رو توگل کنه دگ
عجب والا شما یه هفته پیش جواب منو دادی و فقطم شما جواب میدی کس دگ کلا انگار اینجا نیس
من تو سایتای دگ سوال میپرسم زیر یه ساعت جواب میگیرم اینجا کل مبحث رو تموم میکنم تازه یه نفر اونم شما جواب میدید شاید این پیام تایید نشه ولی من حرفمو زدم سایت فوق العاده خوب و عالی و لی پسخگویی ضعیف و کند صورت میگیره
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-08-11 11:21
سلام دوست عزیز.
الآن زیر یه ساعته که جواب شما رو میدم.
لطفا کد کد صفحه رو بذارید تا ببینم مشکلش چیه. به علامتهای > و < دقت کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1394-08-11 11:33
سلام
کاربر محترم java، فرمودید که بعد از کلیک کردن روی دکمه با آی دی "toggle" صفحه Refresh می شه، احتمالاً شما از عنصر input با نوع Submit استفاده کرده اید که باعث Refresh شدن صفحه می شود، لطفاً بجای آن از عنصر زیر استفاده نمایید:
<button id="toggle">toggle</button>
لطفاً اگر مورد بالا را رعایت نموده اید، کد صفحه مورد نظر را به ایمیل [email protected] ارسال نمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # java 1394-08-10 17:22
toggle رو لطفا بیشتر توضیح بدید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-08-10 20:40
با سلام.
رویداد toggle بین دو افکت () show و افکت () hide تغییر وضعیت میدهد.
رویداد toggle وضعیت نمایش و یا عدم نمایش عنصر مورد نظر رابر روی صفحه میسنجد. اگر عنصر در حال نمایش باشد آن را با استفاده از متد Hide مخفی کرده و اگر عنصر مخفی باشد آن را با استفاده از متد Show نمایش میدهد. این متد برای عناصری که از ابتدای اجرای صفحه مخفی تعیین شده اند، کار نمیکند.

شکل کلی استفاده از این متد به شرح زیر است:

$(selector).tog gle(speed, easing, callback) ;

selector عنصر انتخابی هست. speed پارامتر اختیاری برای تنظیم سرعت که هست. پارامتر easing سرعت رو در انتها و ابتدای اجرای افکت تنظیم میکنه. callback‌ هم تابعی هست که می‌تونید هنگام اجرای افکت اجرا کنید.
باید چندین مثال رو ببینید تا دقیقا متوجه بشید که چطور کار میکنه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # م.ح 1394-04-16 15:21
خسته نباشید
در دومین ()hide که ابتدای صفحه توضیح دادین
$(this).parents(".ex").hide("slow");
رو متوجه نمیشم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1394-04-16 16:11
سلام
به کد زیر دقت کنید:
$(document).ready(function(){
$(".ex .hide").click(f unction(){
$(this).parents (".ex").hide("s low");
});
});

عبارت this به سلکتور بالایی اشاره می کنه، یعنی همان "ex. hide." و دستور parents به عنصر والد عنصر با کلاس hide، که همان عنصر با کلاس ex است اشاره می کنه و سپس به صورت slow یا همان آرام، این عنصر والد رو محو می کنه...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # raghb 1394-02-16 22:47
جالب و آسان
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # محمدggg 1393-03-13 05:06
سلام
ممنون . خیلی جالب بود. تو سبک w3c به زبان فارسی ...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن