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




dom visibility (25)

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

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


Answers

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


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

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

// The same works with hidden
$(element).is(":hidden"); 

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


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

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

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

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

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

كيف تعمل وضوح الرؤية و jQuery ؛

يمكن إخفاء عنصر ما 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: ""
      });
    }
    

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

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

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

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

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


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

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. يعمل على CSS وأنماط مضمنة

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


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

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

العمل كمان


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

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

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

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


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

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

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

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

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

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


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

$(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 ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

إذا تحققنا من $(this).is(":visible") ، فقم بفحص jQuery لكلا الأشياء تلقائيًا.


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

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

لقد استخدمت هذا الرمز لكل وظيفة. وإلا يمكنك استخدامه 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


the: select المحدد وفقا لوثائق jQuery :

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

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

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

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

ضع في اعتبارك أيضًا ملاحظات jQuery الإضافية :

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

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


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

الاختبارات (لا يوجد دعم filter:alpha Internet Explorer filter:alpha ):

أ) تحقق مما إذا كان المستند غير مخفي

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

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

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

اختبارها على

Android 4.4 (متصفح أصلي / Chrome / Firefox) وفايرفوكس (Windows / Mac) و Chrome (Windows / Mac) و Opera (Windows Presto / Mac Webkit) و Internet Explorer (وضعي مستندات Internet Explorer 5-11 + Internet Explorer 8 على آلة افتراضية) ، سفاري (ويندوز / ماك / iOS)

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

عند اختبار عنصر ضد :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

يتم استخدام مثال على استخدام التحقق المرئي من 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() {
  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>


هذا قد يعمل:

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

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

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

والاختيار visible :

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

استخدم وظيفة jQuery's is() :

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked




javascript jquery dom visibility