jQuery: كيفية التحقق مما إذا كان العنصر مخفيًا؟ (شرح للمبتدئين)

مقدمة: لماذا هذا السؤال يهم كل مطور واجهة أمامية

تخيل الموقف: أنت تكتب صفحة تفاعلية تحتوي على قائمة منسدلة، نافذة منبثقة، أو أكورديون. المستخدم ينقر على زر، ويجب أن يظهر الكتلة أو تختفي بسلاسة. ولكن ماذا لو حاولت عن طريق الخطأ تحريك عنصر مخفي بالفعل؟ أو العكس، أظهرت شيئًا مرئيًا بالفعل؟ النتيجة — أخطاء، واجهة متقطعة، ومستخدمون محبطون.

لهذا السبب، السؤال "How do I check if an element is hidden in jQuery?" هو أحد أكثر الأسئلة شيوعًا على Stack Overflow. تم تقديم أكثر من ألف إجابة عليه، وهذا ليس من قبيل الصدفة. القدرة على تحديد رؤية العنصر بشكل صحيح هي مهارة أساسية ستوفر لك ساعات من التصحيح.

في هذه المقالة، سنشرح بالتفصيل كيفية التحقق مما إذا كان العنصر مخفيًا باستخدام jQuery. ستتعرف على المخاطر الخفية، والاختلافات بين display:none و visibility:hidden، وستتعلم كتابة كود موثوق. هيا بنا!

الطريقة .is(':hidden') — أداتك الرئيسية

أبسط وأشهر طريقة للتحقق مما إذا كان العنصر مخفيًا هي استخدام الطريقة .is() مع المحدد الزائف :hidden. jQuery يوفرها بشكل جاهز.

كيف يعمل هذا

المحدد :hidden في jQuery يختار العناصر التي:

\n
• تحتوي على خاصية CSS display: none;
\n
• هي عناصر من النوع <input type="hidden">;
\n
• لها عرض وارتفاع يساويان الصفر (مثل width: 0; height: 0);
\n
• هي أحفاد لعنصر أب مخفي (ترث الاختفاء).
\n

إليك كيف يبدو أبسط فحص:

// نتحقق مما إذا كان العنصر ذو المعرف "myDiv" مخفيًا\nif ($('#myDiv').is(':hidden')) {\n    console.log('العنصر مخفي!');\n} else {\n    console.log('العنصر مرئي.');\n}

التحقق من الرؤية عبر .is(':visible')

للمنطق المعاكس، استخدم المحدد :visible:

if ($('#myDiv').is(':visible')) {\n    console.log('العنصر مرئي على الصفحة.');\n}

كلا الأسلوبين يعملان بسرعة وبديهيان. ولكن هناك فارق بسيط: ماذا لو كان العنصر مخفيًا باستخدام visibility: hidden أو opacity: 0؟ jQuery يعتبر هذه العناصر مرئية، وهذا غالبًا ما يكون مفاجأة للمبتدئين.

المخاطر الخفية: visibility: hidden و opacity: 0

يعتقد العديد من المطورين خطأً أن :hidden يستجيب لأي طريقة لإخفاء العنصر. هذا غير صحيح.

مثال مع visibility: hidden

الخاصية visibility: hidden تجعل العنصر غير مرئي، لكنه لا يزال يشغل مساحة على الصفحة. jQuery يعتبر هذا العنصر مرئيًا، لأن أبعاده لا تساوي الصفر.

<div id="myBox" style="visibility: hidden;">أنا غير مرئي ولكني أشغل مساحة</div>\n\n<script>\nconsole.log( $('#myBox').is(':hidden') );  // false\nconsole.log( $('#myBox').is(':visible') ); // true\n</script>

مثال مع opacity: 0

نفس الشيء ينطبق على الشفافية:

<div id="transparentBox" style="opacity: 0;">شفاف، لكنه مرئي بالنسبة لـ jQuery</div>\n\n<script>\nconsole.log( $('#transparentBox').is(':hidden') );  // false\n</script>

إذا كان الكود الخاص بك يستخدم fadeIn()/fadeOut() أو تحريك الشفافية، فإن الفحص القياسي :hidden سيخذلك. في مثل هذه الحالات، تحتاج إلى التحقق من خاصية CSS محددة.

كيفية التحقق من visibility: hidden أو opacity: 0

عندما تحتاج إلى معرفة ما إذا كان العنصر مخفيًا باستخدام هذه الخصائص تحديدًا، استخدم .css():

التحقق من visibility

var isVisibilityHidden = ($('#myElement').css('visibility') === 'hidden');\nif (isVisibilityHidden) {\n    console.log('العنصر مخفي عبر visibi