it-swarm.asia

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

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

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

7213
Philip Morton

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

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

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

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

8864
Tsvetomir Tsonev

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

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

و visible محدد:

// Matches all elements that are visible
$('element:visible')
1366
twernt
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. لكن ما سبق قد يكون مفيدًا في العديد من الحالات ، خاصةً عندما تحتاج إلى معرفة ما إذا كان هناك div div خطأ مرئية في الأصل المخفي لأنه في مثل هذه الظروف ، لن يعمل :visible.

865
Mote

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

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

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


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

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

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

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

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

محدد :visible وفقًا لـ وثائق jQuery :

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

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

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

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

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

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

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

217
Pedro Rainho

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

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

كيفرؤية عنصر وأعمال 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: ""
      });
    }
    

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

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

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

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

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

149
Evgeny Levin

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

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

145
Matt Brock

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

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

أو يمكنك تبسيط ذلك باستخدام هو كما يلي.

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

رابط العرض التوضيحي

$('#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: كيفية معرفة ما إذا كان العنصر مخفيًا أو مرئيًا باستخدام jQuery

118
Code Spy

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

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

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

111
Lucas - Better Coding Academy

عند اختبار عنصر مقابل محدد :hidden في 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 مع jQuery 3.0.0-alpha1:

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

نفس JS سيكون عندها هذا الإخراج:

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

هذا قد يعمل:

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

مثال:

$(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>
67
Irfan DANISH

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

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

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

var $book = $('#book')

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

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

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


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

إليكم فيديو توضيحي حقًا لبرنامج Google Tech Talk للمهندس الأمامي في Google نيكولاس زاكاس:

60
Lopsided

مثال على استخدام مرئية التحقق من وجود 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 قيد التشغيل.

57
Roman Losev

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

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

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

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

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

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

تم اختباره على

Android 4.4 (متصفح أصلي/Chrome/Firefox) ، Firefox (Windows/Mac) ، Chrome (Windows/Mac) ، Opera (Windows Presto / Mac Webkit) ، Internet Explorer (أوضاع مستند Internet Explorer 5-11 + الإنترنت Explorer 8 على جهاز ظاهري) ، Safari (Windows/Mac/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
57
Aleko

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

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

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

51
Premshankar Tiwari

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

$(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>
39
Mathias Stavrou

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

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

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

34
pixellabme

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

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;
    }
});
33
Andron

ولكن ماذا لو كان عنصر CSS يشبه ما يلي؟

.element{
    position: absolute;left:-9999;    
}

لذلك هذه الإجابة على سؤال Stack Overflow كيفية التحقق مما إذا كان عنصر ما خارج الشاشة ينبغي أيضًا النظر فيها.

31
RN Kushwaha

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

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
30
cssimsek
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
30
Gaurav

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

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

العمل Fiddle

30
V31
.is(":not(':hidden')") /*if shown*/
26
Kareem

لقد بحثت عن هذا ، ولم تكن أي من الإجابات صحيحة لحالتي ، لذلك قمتُ بإنشاء وظيفة ستعود إلى الكاذبة إذا كانت عيون الشخص لا تستطيع رؤية العنصر

jQuery.fn.extend({
  isvisible: function() {
    //
    //  This function call this: $("div").isvisible()
    //  Return true if the element is visible
    //  Return false if the element is not visible for our eyes
    //
    if ( $(this).css('display') == 'none' ){
        console.log("this = " + "display:none");
        return false;
    }
    else if( $(this).css('visibility') == 'hidden' ){
        console.log("this = " + "visibility:hidden");   
        return false;
    }
    else if( $(this).css('opacity') == '0' ){
        console.log("this = " + "opacity:0");
        return false;
    }   
    else{
        console.log("this = " + "Is Visible");
        return true;
    }
  }  
});
19
lmcDevloper
if($('#id_element').is(":visible")){
   alert('shown');
}else{
   alert('hidden');
}
19
Prabhagaran

هذه هي الطريقة مسج داخليا يحل هذه المشكلة:

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

إذا كنت لا تستخدم jQuery ، يمكنك فقط الاستفادة من هذا الرمز وتحويله إلى وظيفتك الخاصة:

function isVisible(elem) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

الذي isVisible سيعود true طالما أن العنصر مرئي.

15
Oriol

ما عليك سوى التحقق مما إذا كان هذا العنصر مرئيًا وسيؤدي إلى إرجاع منطقية ، jQuery إخفاء العناصر عن طريق إضافة عرض لا شيء إلى العنصر ، لذلك إذا كنت تريد استخدام جافا سكريبت خالص ، فيمكنك ما زلت تفعل ذلك ، على سبيل المثال:

if (document.getElementById("element").style.display === 'block') { 
  // your element is visible, do whatever you'd like
}

أيضًا ، يمكنك استخدام jQuery كما يبدو أن باقي التعليمات البرمجية الخاصة بك تستخدم ذلك ولديك كتلة أصغر من التعليمات البرمجية ، كما هو موضح أدناه في jQuery ، تقوم بنفس المسار لك:

if ($(element).is(":visible")) { 
    // your element is visible, do whatever you'd like
};

أيضًا استخدام طريقة css في jQuery يمكن أن يؤدي إلى نفس الشيء:

if ($(element).css('display')==='block') {
    // your element is visible, do whatever you'd like
}

أيضًا في حالة التحقق من الرؤية والعرض ، يمكنك القيام بما يلي:

if ($(this).css("display")==="block"||$(this).css("visibility")==="visible") {
   // your element is visible, do whatever you'd like
}
15
Alireza

هناك عدة طرق للتحقق مما إذا كان العنصر مرئيًا أم مخفيًا في مسج.

العرض التوضيحي HTML على سبيل المثال المرجع

<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>

استخدم محدد عامل تصفية الرؤية $('element:hidden') أو $('element:visible')

  • $('element:hidden'): تحديد جميع العناصر المخفية.

    Example:
       $('#content2:hidden').show();
    
  • $('element:visible'): تحديد جميع العناصر المرئية.

    Example:
       $('#content:visible').css('color', '#EEE');
    

اقرأ المزيد على http://api.jquery.com/category/selectors/visibility-filter-selectors/

استخدم is() Filtering

    Example:
       $('#content').is(":visible").css('color', '#EEE');

    Or checking condition
    if ($('#content').is(":visible")) {
         // Perform action
    }

اقرأ المزيد على http://api.jquery.com/is/

15
Arun Karnawat

يمكنك استخدام هذا:

$(element).is(':visible');

رمز المثال

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

    $("#visiblity").click(function()
    {
       if( $('#content').is(':visible') )
       {
          alert("visible"); // Put your code for visibility
       }
       else
       {
          alert("hidden");
       }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<p id="content">This is a Content</p>

<button id="toggle">Toggle Content Visibility</button>
<button id="visibility">Check Visibility</button>
14
Abrar Jahin

نظرًا لأن hide() و show() و toggle() تقوم بإرفاق css المضمنة (display: none أو display: block) بالعنصر. وبالمثل ، يمكننا بسهولة استخدام عامل التشغيل الثلاثي للتحقق مما إذا كان العنصر مخفيًا أو مرئيًا عن طريق فحص عرض CSS.

تحديث:

  • تحتاج أيضًا إلى التحقق مما إذا كان عنصر CSS مضبوطًا على الرؤية: "مرئي" أو مدى الرؤية: "مخفي"
  • سيكون العنصر مرئيًا أيضًا إذا تم تعيين خاصية العرض على كتلة مضمنة أو كتلة أو فليكس.

حتى نتمكن من التحقق من خاصية عنصر يجعلها غير مرئية. لذلك هم display: none و visibility: "hidden";

يمكننا إنشاء كائن لفحص الخاصية المسؤولة عن إخفاء العنصر:

var hiddenCssProps = {
display: "none",
visibility: "hidden"
}

يمكننا التحقق من خلال تكرار كل قيمة مفتاح في مطابقة الكائن إذا كانت خاصية العنصر مطابقة للمطابقة مع قيمة الخاصية المخفية.

var isHidden = false;
for(key in hiddenCssProps) {
  if($('#element').css(key) == hiddenCssProps[key]) {
     isHidden = true;
   }
}

إذا كنت تريد التحقق من خاصية مثل ارتفاع العنصر: 0 أو العرض: 0 أو أكثر ، فيمكنك تمديد هذا الكائن وإضافة المزيد من الممتلكات إليه ويمكن التحقق منه.

شكرًا لكKrzysztof Przygoda لتذكيري خصائص العرض الأخرى.

14
No one

أريد فقط توضيح ذلك ، في مسج ،

يمكن اعتبار العناصر مخفية لعدة أسباب:

  • لديهم قيمة عرض CSS من لا شيء.
  • إنها عناصر نموذج ذات كتابة = "مخفية".
  • يتم تعيين العرض والارتفاع بشكل صريح إلى 0.
  • عنصر الأجداد مخفي ، لذلك لا يتم عرض العنصر على الصفحة.

العناصر ذات الرؤية: مخفية أو عتامة: 0 تعتبر مرئية ، لأنها لا تزال تستهلك مساحة في التخطيط. أثناء الرسوم المتحركة التي تخفي أحد العناصر ، يعتبر العنصر مرئيًا حتى نهاية الرسوم المتحركة.

المصدر: : محدد مخفي | وثائق واجهة برمجة تطبيقات jQuery

if($('.element').is(':hidden')) {
  // Do something
}
12
Sky Yip

هذا هو بعض الخيارات للتحقق من أن العلامة مرئية أم لا

 // using a pure CSS selector  
   if ($('p:visible')) {  
      alert('Paragraphs are visible (checked using a CSS selector) !');  
   };  
  
   // using jQuery's is() method  
   if ($('p').is(':visible')) {  
      alert('Paragraphs are visible (checked using is() method)!');  
   };  
  
   // using jQuery's filter() method  
   if ($('p').filter(':visible')) {  
      alert('Paragraphs are visible (checked using filter() method)!');  
   };  
  
   // you can use :hidden instead of :visible to reverse the logic and check if an element is hidden  
   // if ($('p:hidden')) {  
   //    do something  
   // };  
11
Sangeet Shah

يمكنك فقط إضافة فئة عندما تكون مرئية. أضف فصلاً ، show. ثم تحقق من وجود فصل:

$('#elementId').hasClass('show');

يتم إرجاع صحيح إذا كان لديك فئة show.

أضف CSS مثل هذا:

.show{ display: block; }
10
Sahan

هناك العديد من الطرق للتحقق من العناصر المخفية. هذا هو الخيار الأفضل (أوصيت لك فقط):

باستخدام jQuery ، قم بعمل عنصر ، "display: none" ، في CSS للاختباء.

المقصود هو:

$('element:visible')

ومثال للاستخدام:

$('element:visible').show();
8
Abdul Aziz Al Basyir

ما عليك سوى التحقق من سمة display (أو visibility اعتمادًا على نوع الغياب الذي تفضله). مثال:

if ($('#invisible').css('display') == 'none') {
    // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
6
Antoine Auffray

يمكنك استعمال ال

$( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});

وثائق واجهة برمجة التطبيقات: https://api.jquery.com/visible-selector/

4
Wolfack

1 • حل مسج

طرق لتحديد ما إذا كان عنصر مرئيًا في JQuery

<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>

حلقة على الكل مرئية div أطفال عنصر معرف 'myelement':

$("#myelement div:visible").each( function() {
 //Do something
});

نظرة خاطفة على مصدر مسج

هذه هي الطريقة التي تنفذ بها jQuery هذه الميزة:

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

2 • كيفية التحقق مما إذا كان العنصر خارج الشاشة - CSS

باستخدام Element.getBoundingClientRect () يمكنك بسهولة اكتشاف ما إذا كان العنصر الخاص بك داخل حدود منفذ العرض الخاص بك أم لا (أي على الشاشة أو خارج الشاشة):

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};

يمكنك بعد ذلك استخدام ذلك بعدة طرق:

// returns all elements that are offscreen
$(':offscreen');

// boolean returned if element is offscreen
$('div').is(':offscreen');

إذا كنت تستخدم الزاوي ، تحقق: لا تستخدم السمة المخفية مع Angular

4
Lyes CHIOUKH
if($("h1").is(":hidden")){
    // your code..
}
3
cbertelegni

إذا كنت ترغب في التحقق مما إذا كان هناك عنصر مرئي على الصفحة ، اعتمادًا على مدى وضوح الأصل ، فيمكنك التحقق مما إذا كان كل من width و height من العنصر مساو لـ 0.

مسج

$element.width() === 0 && $element.height() === 0

فانيلا

element.clientWidth === 0 && element.clientHeight === 0

أو

element.offsetWidth === 0 && element.offsetHeight === 0

2
Profesor08

لكي نكون منصفين ، فإن السؤال يسبق هذه الإجابة.

وأضيف أنه لا ينتقد البروتوكول الاختياري ولكن لمساعدة أي شخص لا يزال يسأل هذا السؤال.

الطريقة الصحيحة لتحديد ما إذا كان هناك شيء مرئي هي استشارة طراز العرض الخاص بك ؛

إذا كنت لا تعرف معنى ذلك فأنت على وشك الشروع في رحلة اكتشاف تجعل عملك أقل صعوبة.

فيما يلي نظرة عامة على نموذج عرض عرض نموذج هندسة (MVVM).

KnockoutJS هي مكتبة ملزمة تتيح لك تجربة هذه الأشياء دون تعلم إطار كامل.

وإليك بعض JS و DIV التي قد تكون أو لا تكون مرئية.

<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script>
    var vm = {
        IsDivVisible: ko.observable(true);
    }
    vm.toggle = function(data, event) {
      //get current visibility state for the div
      var x = IsDivVisible();
      //set it to the opposite
      IsDivVisible(!x);
    }
    ko.applyBinding(vm);
</script>
<div data-bind="visible: IsDivVisible">Peekaboo!</div>
<button data-bind="click: toggle">Toggle the div's visibility</button>
</body>
</html>

لاحظ أن وظيفة التبديل لا تستشير DOM لتحديد مدى وضوح div ، فهي تستشير نموذج العرض.

1
Peter Wone

يمكنك استخدام فئة css عندما تكون مرئية أو مخفية عن طريق تبديل الفصل.

.show{ display :block; }

قم بتعيين jQuery toggleClass() أو addClass() أو removeClass();.

كمثال،

jQuery('#myID').toggleClass('show')

ستضيف التعليمة البرمجية أعلاه فئة show css عندما لا يحتوي العنصر على show وستتم إزالتها عندما تحتوي على فئة show.

وعند التحقق مما إذا كان مرئيًا أم لا ، يمكنك اتباع رمز jQuery هذا ،

jQuery('#myID').hasClass('show');

سيعود الرمز أعلاه إلى منطقي (صواب) عندما يكون لعنصر #myID فئتنا (show) وخطأ عندما لا يحتوي على فئة (show).

0
Sahan

بدلاً من كتابة event لكل element ، قم بما يلي:

$('div').each(function(){
  if($(this).css('display') === 'none'){
    $(this).css({'display':'block'});
  }
});

كما يمكنك استخدامه على المدخلات:

$('input').each(function(){
  if($(this).attr('type') === 'hidden'){
    $(this).attr('type', 'text');
  }
});
0
user10145552

انت تستطيع فعل ذالك:

isHidden = function(element){
    return (element.style.display === "none");
};

if(isHidden($("element")) == true){
    // something
}
0
user8903269

حل jQuery ، سؤال قديم تمامًا ولكن ما زلت سقطت ، يمكنني تقديم إجابة أفضل قليلاً لأولئك الذين يرغبون في تغيير نص الزر أيضًا.

$(function(){
  $("#showHide").click(function(){
    var btn = $(this);
    $("#content").toggle(function () {
      btn.text($(this).css("display") === 'none' ? "Show" : "Hide");
    });
   });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="showHide">Hide</button>
<div id="content">
  <h2>Some content</h2>
  <p>
  What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </p>
</div>
0
Muhammad
$('someElement').on('click', function(){ $('elementToToggle').is(':visible')
0
user6119825