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





dom visibility (26)


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

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

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

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

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




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

الاختبارات (لا يوجد دعم 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



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

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




هذا قد يعمل:

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



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

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

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

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

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



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

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



يمكن للمرء ببساطة استخدام السمة 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




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

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. لا يتطلب إطارًا







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




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

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



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

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

والاختيار visible :

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



في كثير من الأحيان عند التحقق مما إذا كان هناك شيء مرئي أم لا ، سوف تذهب مباشرة إلى الأمام وتفعل شيئا آخر معها. 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" });



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

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



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

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

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




كيف تعمل وضوح الرؤية و 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();
    });
    



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

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

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




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

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



مثال:

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




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

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

أو ما يلي أيضًا هو sam ، مما يحفظ محدد jQuery في متغير للحصول على أداء أفضل عندما تحتاج إليه عدة مرات:

var $book = $('#book')

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



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

الأسلوب أعلاه لا يعتبر رؤية الوالدين. للنظر في الأصل كذلك ، يجب عليك استخدام .is(":hidden") أو .is(":visible") .

فمثلا،

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

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




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

العمل كمان




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

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

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

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




مسج

jQuery يجعل أوامر جافا سكريبت طويلة يبعث على السخرية مثل getElementByHerpDerpأقصر ومتقاطعة عبر متصفح.

AngularJS

يتيح لك AngularJS إنشاء علامات / سمات HTML الخاصة بك التي تقوم بأشياء تعمل بشكل جيد مع تطبيقات الويب الديناميكية (حيث تم تصميم HTML للصفحات الثابتة).

تصحيح:

قائلا "لدي خلفية jQuery كيف أفكر في AngularJS؟" يشبه القول "لدي خلفية HTML كيف أفكر في JavaScript؟" إن حقيقة طرحك للسؤال توضح أنك لن تفهم على الأغلب الأغراض الأساسية لهذين الموردين. ولهذا السبب اخترت الإجابة عن السؤال من خلال الإشارة ببساطة إلى الاختلاف الأساسي بدلاً من الذهاب إلى القائمة بقول "AngularJS تستخدم التوجيهات في حين أن jQuery تستخدم CSS selectors لعمل كائن jQuery الذي يقوم بهذا وذاك ... إلخ". . هذا السؤال لا يتطلب إجابة مطولة.

jQuery هي طريقة لجعل برمجة جافا سكريبت في المتصفح أسهل. أوامر أقصر عبر المستعرض ، وما إلى ذلك.

AngularJS يمتد HTML ، لذلك ليس لديك لوضع في <div>كل مكان فقط لتقديم طلب. يجعل HTML تعمل بالفعل للتطبيقات بدلا من ما تم تصميمه ل ، وهو ثابت صفحات الويب التعليمية. إنها تحقق ذلك بطريقة دائرية باستخدام جافا سكريبت ، ولكنها في الأساس عبارة عن امتداد لـ HTML ، وليس JavaScript.





javascript jquery dom visibility