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



Answers

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

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

والاختيار visible :

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

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

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




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

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



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



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

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




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

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



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

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

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

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




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

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

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

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



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

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



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

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

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

var $book = $('#book')

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



يجب تعيين 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
    }
});



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

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

العمل كمان




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



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



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

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

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




Related