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