javascript كيف أتحقق من إخفاء عنصر في jQuery؟





15 Answers

يمكنك استخدام المحدد hidden :

// Matches all elements that are hidden
$('element:hidden')

والاختيار visible :

// Matches all elements that are visible
$('element:visible')
javascript jquery dom visibility

من الممكن تبديل رؤية عنصر ، باستخدام الدوال .hide() أو .show() أو .toggle() .

كيف يمكنك اختبار ما إذا كان العنصر مرئيًا أو مخفيًا؟




لا تعالج أي من هذه الإجابات ما أفهمه على أنه السؤال ، وهو ما كنت أبحث عنه ، "كيف أتعامل مع العناصر التي تكون visibility: hidden ؟" . لا :visible ولا :hidden ستتعامل :hidden مع هذا ، حيث يبحث كلاهما عن العرض وفقًا للوثائق. بقدر ما يمكنني تحديد ، لا يوجد محدد لمعالجة رؤية CSS. إليك كيفية حلها (محددات jQuery القياسية ، قد يكون هناك صيغة أكثر كثافة):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});



في كثير من الأحيان عند التحقق مما إذا كان هناك شيء مرئي أم لا ، سوف تذهب مباشرة إلى الأمام وتفعل شيئا آخر معها. jQuery تسلسل يجعل هذا سهلا.

لذلك إذا كان لديك محدد وتريد تنفيذ بعض الإجراءات عليه فقط إذا كان مرئيًا أو مخفيًا ، فيمكنك استخدام filter(":visible") أو filter(":hidden") متبوعًا بالتسلسل مع الإجراء الذي تريد يأخذ.

لذا بدلاً من بيان if ، مثل هذا:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

أو أكثر كفاءة ، ولكن حتى أقبح:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

يمكنك القيام بكل ذلك في سطر واحد:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });



هذا يعمل بالنسبة لي ، وأنا باستخدام show() hide() div الخاص بي / مرئية:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}



أود استخدام فئة CSS. .hide { display: none!important; } .hide { display: none!important; } .

.addClass("hide")/.removeClass("hide") / العرض ، أدعو .addClass("hide")/.removeClass("hide") . للتحقق من الرؤية ، أستخدم .hasClass("hide") .

إنها طريقة بسيطة وواضحة للتحقق من / إخفاء / إظهار العناصر ، إذا كنت لا تخطط لاستخدام أساليب. .toggle() أو .toggle() .




يمكن للمرء ببساطة استخدام السمة hidden أو visible ، مثل:

$('element:hidden')
$('element:visible')

أو يمكنك تبسيط الشيء نفسه على النحو التالي.

$(element).is(":visible")



$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

مصدر:

Blogger Plug n Play - jQuery Tools and Widgets: How to see if Element hidden or Visible Using jQuery

jsFiddle:

JSFiddle - ipsjolly - k4WWj




عند اختبار عنصر ضد :hidden محدد :hidden في jQuery ، يجب أن نعتبر أنه يمكن التعرف على العنصر المطلق على أنه مخفي على الرغم من أن عناصر الطفل الخاصة به مرئية .

يبدو هذا غير بديهي إلى حد ما في المقام الأول - على الرغم من إلقاء نظرة فاحصة على وثائق jQuery يعطي المعلومات ذات الصلة:

يمكن اعتبار العناصر مخفية لعدة أسباب: [...] يتم تعيين عرضهم والارتفاع بشكل صريح إلى 0. [...]

لذلك هذا منطقي فيما يتعلق بنموذج الصندوق والنمط المحسوب للعنصر. حتى إذا لم يتم ضبط العرض والارتفاع صراحةً إلى 0 فقد يتم تعيينهما ضمنيًا .

إلقاء نظرة على المثال التالي:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>

تحديث ل JQUERY 3.x:

مع jQuery 3 سيتغير السلوك الموصوف! سيتم اعتبار العناصر مرئية إذا كانت تحتوي على أي مربعات تنسيق ، بما في ذلك مربعات العرض و / أو الارتفاع.

JSFiddle with jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

نفس JS سيكون عندها هذا الناتج:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false



مثال:

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>




استخدم تبديل الطبقة ، وليس تحرير النمط. . .

استخدام الفئات المعينة لعناصر "الإخفاء" أمر سهل وأيضًا أحد الأساليب الأكثر فاعلية. سيؤدي تبديل فئة "مخفية" بنمط Display "بلا" إلى إجراء أسرع من تعديل هذا النمط مباشرةً. شرحت بعضًا من هذا بشكل شامل تمامًا في سؤال : تحويل عنصرين مرئيين / مخفيين في نفس div .

أفضل ممارسات جافا سكريبت والتحسين

في ما يلي مقطع فيديو مفيد حقًا لـ Google Tech Talk من قِبل مهندس الواجهة الأمامية لـ Google Nicholas Zakas:




يتم استخدام مثال على استخدام التحقق المرئي من adblocker:

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

"ablockercheck" هو معرف الذي يمنع كتل adblocker. لذا تحقق من ذلك إذا كان مرئيًا يمكنك اكتشاف ما إذا كان adblocker قيد التشغيل.




ربما يمكنك فعل شيء كهذا

$(document).ready(function() {
   var visible = $('#tElement').is(':visible');

   if(visible) {
      alert("visible");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>




if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}



ما عليك سوى التحقق من مستوى الرؤية عن طريق التحقق من قيمة منطقية ، مثل:

if (this.hidden === false) {
    // Your code
}

لقد استخدمت هذا الرمز لكل وظيفة. وإلا يمكنك استخدامه is(':visible') للتحقق من رؤية أحد العناصر.




إليك أيضًا تعبير شرطي ثلاثي للتحقق من حالة العنصر ثم تبديله:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });



Related