javascript - كيف يمكنني التحقق مما إذا كان العنصر مخفيا في جكري؟


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

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




Answers


وبما أن السؤال يشير إلى عنصر واحد، فإن هذا الرمز قد يكون أكثر ملاءمة:

// Checks for display:[none|block], ignores visible:[true|false]
$(element).is(":visible"); 

نفس اقتراح تويرنت ، ولكن تطبيقها على عنصر واحد. ويطابق الخوارزمية الموصى بها في أسئلة وأجوبة مسج




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

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

والمحدد visible :

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



if ( $(element).css('display') == 'none' ){
    // element is hidden
}

لا تعمل الدالات مع سمة الرؤية.




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

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



من كيف يمكنني تحديد حالة عنصر مثبت؟

يمكنك تحديد ما إذا كان العنصر قد انهار أم لا باستخدام :hidden محددات :visible و :hidden .

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

إذا كنت تعمل ببساطة على عنصر استنادا إلى الرؤية، يمكنك فقط تضمين :visible أو :hidden في التعبير المحدد. فمثلا:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');



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

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

لذلك بدلا من بيان إف، مثل هذا:

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" });



:visible محدد :visible وفقا لوثائق مسج :

  • لديهم قيمة display كس none .
  • وهي عناصر شكل مع type="hidden" .
  • يتم تعيين العرض والارتفاع بشكل صريح إلى 0.
  • تم إخفاء عنصر سلف، لذلك لا يظهر العنصر على الصفحة.

العناصر التي لها visibility: hidden أو opacity: 0 تعتبر مرئية، لأنها لا تزال تستهلك مساحة في التخطيط.

وهذا مفيد في بعض الحالات وغير مجدية في الآخرين، لأنه إذا كنت ترغب في التحقق مما إذا كان العنصر مرئيا ( display != none )، وتجاهل رؤية الوالدين، وسوف تجد أن تفعل .css("display") == 'none' ليس فقط أسرع، ولكن أيضا إعادة التحقق من الرؤية بشكل صحيح.

إذا كنت ترغب في التحقق من الرؤية بدلا من العرض، يجب عليك استخدام: .css("visibility") == "hidden" .

تأخذ أيضا بعين الاعتبار الملاحظات مسج إضافية :

لأن :visible هو امتداد مسج وليس جزءا من مواصفات كس، الاستعلامات باستخدام :visible لا يمكن الاستفادة من دفعة الأداء التي تقدمها طريقة دوم querySelectorAll() دوم الأصلي. لتحقيق أفضل أداء عند استخدام :visible لتحديد العناصر، حدد أولا العناصر باستخدام محدد كس النقي، ثم استخدم .filter(":visible") .

أيضا، إذا كنت تشعر بالقلق إزاء الأداء، يجب عليك التحقق الآن ترى لي ... إظهار / إخفاء الأداء (2010-05-04). واستخدم طرقا أخرى لإظهار العناصر وإخفائها.




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

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



كيف يعمل عنصر الرؤية و جكري ؛

يمكن إخفاء عنصر مع display:none ، مستوى visibility:hidden أو opacity:0 . الفرق بين هذه الطرق:

  • display:none يخفي العنصر، وأنه لا يستغرق أي مساحة.
  • visibility:hidden يخفي العنصر، لكنه لا يزال يأخذ مساحة في التخطيط؛
  • opacity:0 يخفي العنصر بأنه "مستوى الرؤية: مخفي"، ولا يزال يأخذ مساحة في التخطيط؛ والفرق الوحيد هو أن التعتيم يتيح واحد لجعل عنصر جزئيا شفافة.

    if ($('.target').is(':hidden')) {
      $('.target').show();
    } else {
      $('.target').hide();
    }
    if ($('.target').is(':visible')) {
      $('.target').hide();
    } else {
      $('.target').show();
    }
    
    if ($('.target-visibility').css('visibility') == 'hidden') {
      $('.target-visibility').css({
        visibility: "visible",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        visibility: "hidden",
        display: ""
      });
    }
    
    if ($('.target-visibility').css('opacity') == "0") {
      $('.target-visibility').css({
        opacity: "1",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        opacity: "0",
        display: ""
      });
    }

    طرق تبديل مسج مفيدة:

    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });



أود استخدام كس الطبقة .hide { display: none!important; } .hide { display: none!important; } .

لإخفاء / إظهار، أدعو .addClass("hide")/.removeClass("hide") . للتحقق من مستوى الرؤية، يمكنني استخدام .hasClass("hide") .

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




يمكنك أيضا القيام بذلك باستخدام جافا سكريبت عادي:

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

ملاحظات:

  1. يعمل في كل مكان

  2. يعمل للعناصر المتداخلة

  3. يعمل ل كس والأنماط المضمنة

  4. لا يتطلب إطارا




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

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

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

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



هناك إجابة أخرى يجب وضعها في الاعتبار هي إذا كنت تخفي عنصرا، يجب عليك استخدام جكري ، ولكن بدلا من إخفاءه فعليا، يمكنك إزالة العنصر بالكامل، ولكن يمكنك نسخ محتوى هتمل والعلامة نفسها إلى متغير مسج، ثم كل ما عليك القيام به هو اختبار إذا كان هناك مثل هذه العلامة على الشاشة، وذلك باستخدام العادي if (!$('#thetagname').length) .




يجب تعيين ebdiv على style="display:none;" ebdiv style="display:none;" . وهو يعمل للعرض والاختباء:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});



HTML

<div id="clickme">
 Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

مسج

<script>

$('#clickme').click(function() {
$('#book').toggle('slow', function() {
    // Animation complete.
     alert( $('#book').is(":visible"));//<--- TRUE if Visible False if Hidden
   });
});

</script>

مصدر:

بلوجر بلوغ n بلاي - أدوات وأدوات جكري: كيفية معرفة ما إذا كان العنصر مخفيا أو مرئيا باستخدام جكري

jsFiddle:

جسفيدل - إبسجولي - k4WWj




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

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

يمكن اعتبار العناصر مخفية لعدة أسباب: [...] يتم عرض عرضها وطولها بشكل صريح إلى 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>

أوبديت فور جكري 3.x:

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

جسفيدل مع جكري 3.0.0-alpha1:

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

نفس جس سيكون ثم هذا الإخراج:

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



قد يعمل هذا:

expect($("#message_div").css("display")).toBe("none");



للتحقق مما إذا كان غير مرئية يمكنني استخدام ! :

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

أو ما يلي هو أيضا سام، وتوفير محدد مسج في متغير أن يكون أداء أفضل عندما كنت في حاجة إليها عدة مرات:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}



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

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

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

هنا هو فيديو مستنير حقا من جوجل تالك نقاش من قبل جوجل المهندس الأمامية نيكولاس زاكاس:




مثال:

$(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>




يتم تنشيط مثال استخدام الاختيار المرئي ل أدبلوكر:

$(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>

"أبلوكيرشيك" هو إد التي كتل أدبلوكر. لذلك التحقق من ذلك إذا كان مرئيا كنت قادرا على كشف إذا تم تشغيل أدبلوكر على.




بعد كل شيء، لا شيء من الأمثلة يناسب لي، لذلك كتبت بلدي.

الاختبارات (بدون دعم من إنترنيت إكسبلورر filter:alpha ):

أ) التحقق مما إذا كانت الوثيقة غير مخفية

ب) تحقق مما إذا كان العنصر يحتوي على عرض صفري / ارتفاع / تعتيم أو display:none / مستوى visibility:hidden في الأنماط المضمنة

ج) التحقق مما إذا كان المركز (أيضا لأنه أسرع من اختبار كل بكسل / زاوية) من العنصر غير مخفي بواسطة عنصر آخر (وجميع الأجداد، على سبيل المثال: overflow:hidden / التمرير / عنصر واحد فوق إينوثر) أو حواف الشاشة

د) التحقق مما إذا كان العنصر يحتوي على عرض صفري / ارتفاع / تعتيم أو display:none / الرؤية: مخفي في الأنماط المحسوبة (بين جميع الأجداد)

اختبارها على

أندرويد 4.4 (متصفح أصلي / كروم / فايرفوكس) و فيريفوكس (نظام التشغيل ويندوز / ماك) و كروم (نظام التشغيل ويندوز / ماك) و أوبيرا (ويندوز بريستو / ماك ويبكيت) و إنترنيت إكسبلورر (إنترنيت إكسبلورر 5-11 وسائط المستند + إنترنيت إكسبلورر 8 الجهاز الظاهري)، سفاري (ويندوز / ماك / دائرة الرقابة الداخلية)

var is_visible = (function () {
    var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
        y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
        relative = !!((!x && !y) || !document.elementFromPoint(x, y));
        function inside(child, parent) {
            while(child){
                if (child === parent) return true;
                child = child.parentNode;
            }
        return false;
    };
    return function (elem) {
        if (
            document.hidden ||
            elem.offsetWidth==0 ||
            elem.offsetHeight==0 ||
            elem.style.visibility=='hidden' ||
            elem.style.display=='none' ||
            elem.style.opacity===0
        ) return false;
        var rect = elem.getBoundingClientRect();
        if (relative) {
            if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
        } else if (
            !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
            (
                rect.top + elem.offsetHeight/2 < 0 ||
                rect.left + elem.offsetWidth/2 < 0 ||
                rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
                rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
            )
        ) return false;
        if (window.getComputedStyle || elem.currentStyle) {
            var el = elem,
                comp = null;
            while (el) {
                if (el === document) {break;} else if(!el.parentNode) return false;
                comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
                if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
                el = el.parentNode;
            }
        }
        return true;
    }
})();

كيف تستعمل:

is_visible(elem) // boolean



تحتاج إلى التحقق من كل من ... العرض وكذلك الرؤية:

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

إذا تحققنا من $(this).is(":visible") ، جكري يتحقق لكلا الأمرين تلقائيا.




ربما يمكنك أن تفعل شيئا من هذا القبيل

$(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>




لأن Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (كما هو موضح ل جكري: محدد مرئي ) - يمكننا التحقق مما إذا كان العنصر مرئيا حقا بهذه الطريقة:

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});






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



يمكن إنشاء وظيفة من أجل التحقق من سمات الرؤية / العرض من أجل قياس ما إذا كان العنصر يظهر في واجهة المستخدم أم لا.

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

العمل كمان




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

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

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




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

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