از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
جاوا اسکریپت: بررسی کنید که آیا عنصر با جی کوئری مخفی است در این مقاله نگاهی خواهیم داشت به روش بررسی اینکه آیا یک عنصر با جی کوئری مخفی شده است یا خیر. در اینجا رایج ترین راه ها برای بررسی نمایان بودن یک عنصر وجود دارد: console.log($(myElement).is(":hidden")) console.log($(myElement).is(":visible")) console.log($(myElement).css(…
سرفصلهای مطلب
معرفی
در این مقاله نگاهی خواهیم داشت چگونه بررسی کنیم که آیا یک عنصر با JQuery مخفی است یا خیر. در اینجا رایج ترین راه ها برای بررسی نمایان بودن یک عنصر وجود دارد:
console.log($(myElement).is(":hidden"))
console.log($(myElement).is(":visible"))
console.log($(myElement).css("visibility") === "hidden")
console.log($(myElement).css("display") === "none")
console.log($(myElement).css("opacity") <= "0")
“چرا راه های زیادی برای بررسی دید وجود دارد؟”
عوامل متعددی می توانند در نمایان شدن یک عنصر نقش داشته باشند! ما هر مورد را پوشش خواهیم داد و در نظر خواهیم گرفت که چه زمانی عاقلانه است از آنها استفاده کنیم. اگرچه، ابتدا، اجازه دهید محیط آزمایشی خود را تنظیم کنیم.
راه اندازی محیط
برای این آموزش از jQuery Core نسخه 3.6.0 استفاده خواهیم کرد. می توانید آخرین CDN را از این سایت دریافت کنید وب سایت رسمی جی کوئری.
بیایید با ایجاد یک شروع کنیم index.html با کد دیگ بخاری که اکثر صفحات دارند فایل کنید و a را اضافه کنید <p> عنصر با کلاسی به نام first-element به <body>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<p class="first-element" >This is the first paragraph.</p>
</body>
</html>
حالا بیایید این پاراگراف را پنهان کنیم تا بتوانیم دید آن را با آن تست کنیم .is(":hidden")! برای پنهان کردن first-element ما به سادگی می توانیم اضافه کنیم hidden نسبت دادن به آن:
<p class="first-element" hidden>This is the first paragraph</p>
توجه داشته باشید: بارگیری مجدد page و تایید کنید که first-element دیگر قابل مشاهده نیست
بررسی کنید که آیا عنصر با آن پنهان است یا خیر .پنهان است”)
برای استفاده .is(":hidden") شما می توانید ایجاد کنید <script></script> تگ کنید و کد جاوا اسکریپت خود را در آنها اضافه کنید یا از آن استفاده کنید کنسول ابزار مرورگر شما برای اجرای مستقیم کد. هرکدام را که می خواهید انتخاب کنید، تاثیری در نتیجه نخواهد داشت.
در هر صورت، می‌توانید خروجی را از روی آن بخوانید کنسول زبانه (با فشار دادن F12 یا Ctrl + Shift + I برای اکثر مرورگرها). از طرف دیگر، می توانید کلیک راست کنید روی را page و انتخاب کنید “بازرسی” از منو در فایرفاکس این است “بازرسی عنصر”.
.is(":hidden") بر خواهد گشت true اگر عنصر انتخاب شده پنهان باشد. اگر پنهان نباشد، باز خواهد گشت false.
بیایید از این روش استفاده کنیم روی پنهان ما .first-element:
var myElement = ".first-element";
console.log(myElement + " is hidden?: " + $(myElement).is(":hidden"));
اگر بررسی کنید کنسول در تب مرورگر خود، باید خروجی زیر را مشاهده کنید:
.first-element is hidden?: true
نسبتا ساده است، درست است؟ می توانیم از روش استفاده کنیم is(":visible") برای تأیید نتیجه فعلی ما
بررسی کنید که آیا عنصر با آن پنهان است یا خیر است (“:قابل مشاهده”)
is(":visible") دید یک عنصر را آزمایش می کند و برمی گردد true اگر عنصر انتخاب شده قابل مشاهده باشد، یا باز خواهد گشت false اگر پنهان باشد
همانطور که متوجه شدید، دقیقا برعکس این است .is(":hidden") روش. این بدان معنی است که هر دوی آنها نمی توانند مقدار یکسانی را برای یک عنصر برگردانند. نه در همان زمان حداقل.
بیایید آن را آزمایش کنیم روی را first-element و نتیجه را مشاهده کنید:
var myElement = ".first-element";
console.log(myElement + " is visible?: " + $(myElement).is(":visible"));
همانطور که انتظار می رود، خروجی a false ارزش:
.first-element is visible?: false
توجه داشته باشید که هنگام کار با ورودی های مخفی نیز همین نتایج را دریافت خواهید کرد:
<input type="hidden" class="inp-element" value="3487">
اگر چه hidden پارامتر به ما منتقل شد input عنصر از طریق type ویژگی، همچنان همان نتیجه را ایجاد می کند.
تا اینجای کار خیلی خوبه. حالا بیایید بازی خود را یک گام به جلو ببریم و ببینیم که چگونه نمایان بودن را که توسط CSS اصلاح شده است آزمایش کنیم.
بررسی کنید که آیا عنصر با آن پنهان است یا خیر .css (“مشاهده”)
بیایید دو مورد دیگر را به DOM خود اضافه کنیم:
<p class="second-element">This is the second paragraph.</p>
<p class="third-element">This is the third paragraph.</p>
خود را تازه/بارگذاری مجدد کنید page و تأیید کنید که عناصر جدید اضافه شده است.
حالا ما آن را تغییر خواهیم داد visibility دارایی از second-element. برای انجام این کار، می توانید یک فایل CSS ایجاد کنید و آن را به فایل HTML خود پیوند دهید یا کد CSS خود را در داخل آن بنویسید <head> تگ فایل HTML شما، در داخل <style></style> برچسب ها:
.second-element{
visibility: hidden;
}
حالا این قسمت کمی مشکل است. قبل از بارگیری مجدد page، به موقعیت فعلی نگاه کنید third-element. اگر رفرش کنید page، متوجه خواهید شد که second-element دیگر قابل مشاهده نیست، اما همچنان همان فضا را اشغال می کند. قابل مشاهده نیست، هنوز موقعیت از third-element نشان می دهد که هنوز آنجاست. در واقع، اگر پیش برویم و توابع قبلی خود را برای این عنصر اجرا کنیم:
var myElement = ".second-element";
console.log(myElement + " is hidden?: " + $(myElement).is(":hidden"));
console.log(myElement + " is visible?: " + $(myElement).is(":visible"));
ما به نتیجه ای که هست می رسیدیم نه پنهان است، اما همچنان قابل مشاهده است:
.second-element is hidden?: false
.second-element is visible?: true
دلیل آن این است که وقتی شما تنظیم می کنید visibility دارایی به hidden، نامرئی می شود ولی هنوز هم توسط مرورگر رندر می شود، بنابراین فضای اولیه خود را اشغال می کند. اکثر مرورگرها در صورت وجود عناصر قابل مشاهده را در نظر می گیرند height و/یا width. به عبارت دیگر، هر عنصر با ابعاد صفر، پنهان در نظر گرفته می شود.
اکنون که می دانیم با چه چیزی سر و کار داریم، تنها کاری که باید انجام دهیم این است که بررسی کنیم که آیا visibility ویژگی عنصر تنظیم شده است hidden، نه اینکه آیا عنصر خود است hidden:
var myElement = ".second-element";
console.log(myElement + " is visibility === hidden?: " + ($(myElement).css("visibility") === "hidden"));
این باز خواهد گشت true:
.second-element is visibility === hidden?: true
در حالی که در حال انجام آن هستیم، بیایید بررسی کنیم که سایر ویژگی های CSS بر روی دید تأثیر می گذارد.
بررسی کنید که آیا عنصر با آن پنهان است یا خیر .css (“نمایش”)
یکی دیگر از ویژگی های CSS که معمولاً برای پنهان کردن عناصر استفاده می شود این است display. ما در حال حاضر خود را داریم third-element در DOM ما آماده است. بنابراین تنها کاری که باید انجام دهیم این است که آن را تنظیم کنیم display به none:
.third-element {
display: none;
}
پس از تازه کردن page، می بینید که دیگر قابل مشاهده نیست.
در حال حاضر، چیز خوب در مورد display: none; این است که ما می توانیم آن را به درستی با استفاده از قبلی خود انتخاب کنیم is(":hidden") و is(":visible") مواد و روش ها:
var myElement = ".third-element";
console.log(myElement + " is hidden?: " + $(myElement).is(":hidden"));
console.log(myElement + " is visible?: " + $(myElement).is(":visible"));
از آنجایی که مرورگر آن را رندر نمی کند third-element، نتایج را همانطور که انتظار می رود دریافت می کنیم:
.third-element is hidden?: true
.third-element is visible?: false
ما همچنین می توانیم آن را با استفاده از .css() انتخابگر:
var myElement = ".third-element";
console.log(myElement + " is css.display == none?: " + ($(myElement).css("display") === "none"));
و در نتیجه خروجی زیر را دریافت خواهیم کرد:
.third-element is css.display == none?: true
راه دیگر برای نامرئی کردن یک عنصر این است که Opacity آن را صفر کنید. در قسمت بعدی یک عنصر جدید ایجاد می کنیم، opacity آن را تغییر می دهیم و بررسی می کنیم که آیا قابل مشاهده است یا خیر.
بررسی کنید که آیا عنصر با آن پنهان است یا خیر .css (“معروف بودن”)
نامرئی کردن یک آیتم از طریق opacity مشابه با تنظیم عمل می کند visibility دارایی به hidden. به همین دلیل، برای مشاهده بهتر تغییر، دو عنصر دیگر اضافه می کنیم:
<p class="fourth-element">This is the fourth paragraph.</p>
<p class="visible-element">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis corrupti inventore, et beatae accusantium perferendis?</p>
حالا بیایید مقداری بالشتک اضافه کنیم تا بر فضای اشغال شده توسط آن تاکید کنیم fourth-elementو همچنین opacity آن را صفر کنید:
.fourth-element {
padding: 30px;
opacity: 0;
}
طراوت کردن page، متوجه عدم وجود آن خواهید شد fourth-element. دارای ابعاد است، بنابراین رندر می شود، اما مات نیست، بنابراین قابل مشاهده نیست.
بنابراین به طور طبیعی، تمام روش های زیر:
var myElement = ".fourth-element";
console.log(myElement + " is hidden?: " + $(myElement).is(":hidden"));
console.log(myElement + " is visibility === hidden?: " + ($(myElement).css("visibility") === "hidden"));
console.log(myElement + " is css.display == none?: " + ($(myElement).css("display") === "none"));
بر خواهد گشت false:
.fourth-element is hidden?: false
.fourth-element is visibility === hidden?: false
.fourth-element is css.display == none?: false
تنها راه برای گرفتن این عنصر نامرئی، استفاده از .css("opacity") انتخابگر:
var myElement = ".fourth-element";
console.log(myElement + " is opacity lesser than or equal to 0?: " + ($(myElement).css("opacity") <= "0"));
این برمی گردد true:
.fourth-element is opacity lesser than or equal to 0?: true
و این آموزش ما را به پایان می رساند روی چگونه بررسی کنیم که آیا یک عنصر با جی کوئری مخفی شده است یا خیر!
نتیجه
در این آموزش یاد گرفتیم که چگونه نمایان بودن یک عنصر را با استفاده از انتخابگرهای jQuery بررسی کنیم. در حالی که .is(":hidden")، is(":visible")، و .css("display") انتخابگرها انتخاب خوبی برای انتخاب عناصر رندر نشده هستند، .css("visibility") و .css("opacity") بهترین گزینه برای عناصری هستند که رندر می شوند اما برای چشم انسان قابل مشاهده نیستند.
منتشر شده در 1403-01-16 05:47:03
