Come posso verificare se un elemento è nascosto in jQuery?


7746

È possibile commutare la visibilità di un elemento, utilizzando le funzioni .hide(), .show()o .toggle()?

Come testeresti se un elemento è visibleo hidden?


49
Vale la pena ricordare (anche dopo tutto questo tempo), che $(element).is(":visible")funziona per jQuery 1.4.4, ma non per jQuery 1.3.2, in Internet & nbsp; Explorer & nbsp; 8 . Questo può essere testato usando lo snippet di test utile di Tsvetomir Tsonev . Ricorda solo di cambiare la versione di jQuery, per testarla sotto ognuna.
Reuben

2
Questo è collegato anche se una domanda diversa: stackoverflow.com/questions/17425543/…
Mark Schultheiss

Risposte:


9402

Poiché la domanda si riferisce a un singolo elemento, questo codice potrebbe essere più adatto:

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

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

È lo stesso del suggerimento di Twernt , ma applicato a un singolo elemento; e corrisponde all'algoritmo raccomandato nelle FAQ di jQuery .

Usiamo jQuery's () per verificare l'elemento selezionato con un altro elemento, selettore o qualsiasi oggetto jQuery. Questo metodo attraversa gli elementi DOM per trovare una corrispondenza, che soddisfa il parametro passato. Restituirà vero se c'è una corrispondenza, altrimenti restituirà falso.


164
Questa soluzione sembrerebbe incoraggiare la confusione di visible=falsee display:none; che la soluzione di Mote illumina chiaramente i programmatori che intendono verificare il display:none; (tramite menzione di hide and show che display:nonenon controlla visible=true)
kralco626

93
Questo è corretto, ma :visiblecontrollerà anche se gli elementi padre sono visibili, come ha sottolineato Chiborg.
Tsvetomir Tsonev,

45
Hai un punto: chiarirò che il codice controlla solo la displayproprietà. Dato che la domanda originale è per show()e hide(), e stabiliscono display, la mia risposta è corretta. A proposito, funziona con IE7, ecco uno snippet di prova - jsfiddle.net/MWZss ;
Tsvetomir Tsonev,

53
Ho scoperto che le parole della logica inversa sono migliori:! $ ('Selector'). Is (': hidden'); per qualche ragione. Vale la pena provare.
Kzqai,

21
Ecco un semplice test di benchmark è () contro regexp: jsperf.com/jquery-is-vs-regexp-for-css-visibility . Conclusione: se sei fuori per prestazioni, usa regexp over is () (poiché is () cerca tutti i nodi nascosti prima di guardare l'elemento reale).
Max Leske,

1460

Puoi usare il hiddenselettore:

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

E il visibleselettore:

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

67
fai solo attenzione, ci sono alcuni buoni consigli relativi alle prestazioni in questa presentazione: addyosmani.com/jqprovenperformance
codecraig

27
Nelle pagine da 21 a 28 mostra quanto è lento: nascosto o: visibile rispetto ad altri selettori. Grazie per averlo indicato.
Etienne Dupuis,

109
Quando hai a che fare con un paio di elementi e sta succedendo ben poco - vale a dire ASSURDAMENTE VASTA MAGGIORANZA DEI CASI - il problema del tempo è una preoccupazione ridicolmente minore. Oh no! Ci sono voluti 42 ms anziché 19 ms !!!
Vbullinger,

16
Sto attivando l'elemento in modo casuale usando questo selettore. $ ('element: hidden') è sempre vero per me!
ZoomIn

15
@cwingrav Potresti voler rileggere la documentazione,: nascosto si applica a tutti gli elementi. Gli elementi del modulo con type="hidden"sono solo un caso che può essere attivato: nascosto. Anche gli elementi senza altezza e larghezza, gli elementi con display: nonee gli elementi con antenati nascosti si qualificheranno come: nascosto.
Joshua Walsh,

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

Il metodo sopra non considera la visibilità del genitore. Per considerare anche il genitore, dovresti usare .is(":hidden")o .is(":visible").

Per esempio,

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

Il metodo sopra considerato sarà div2visibile mentre :visibleno. Ma quanto sopra potrebbe essere utile in molti casi, in particolare quando è necessario scoprire se sono presenti div di errore visibili nel genitore nascosto perché in tali condizioni :visiblenon funzionerà.


131
Questo controlla solo la proprietà display di un singolo elemento. L'attributo: visible controlla anche la visibilità degli elementi padre.
Chiborg,

16
Questa è l'unica soluzione che ha funzionato per me durante i test con IE 8.
evanmcd

20
@chiborg Sì, ma a volte è quello che vuoi e ho dovuto imparare a fondo quanto jQuery fosse "intelligente" ...
Casey

9
Questo fa rispondere alla domanda, essendo la domanda riguarda un singolo elemento e in base alle hide(), show()e toggle()funzioni, tuttavia, come la maggior parte hanno già detto, dobbiamo utilizzare le :visiblee :hiddenpseudo-classi.
Jimmy Knoot,

2
Questa risposta può essere utilizzata quando esiste un elemento ma non è attualmente nella pagina, come after detach ().
atea

526

Nessuna di queste risposte affronta quella che intendo essere la domanda, che è quello che stavo cercando, "Come gestisco gli oggetti che hanno visibility: hidden?" . Né :visible:hiddengestirà questo, in quanto sono entrambi alla ricerca di visualizzazione per la documentazione. Per quanto ho potuto determinare, non esiste un selettore per gestire la visibilità CSS. Ecco come l'ho risolto (selettori jQuery standard, potrebbe esserci una sintassi più condensata):

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

18
Questa risposta è buona da gestire alla visibilitylettera, ma la domanda era How you would test if an element has been hidden or shown using jQuery?. L'uso di jQuery significa: la displayproprietà.
MarioDS,

10
Gli elementi con visibility: hiddeno opacity: 0sono considerati visibili, poiché continuano a consumare spazio nel layout. Vedi la risposta di Pedro Rainho e la documentazione di jQuery sul :visibleselettore.
timore

9
devi attraversare il DOM per controllare i genitori del nodo, altrimenti è inutile.
vsync,

390

Da Come posso determinare lo stato di un elemento attivato / disattivato?


È possibile determinare se un elemento è compresso o meno utilizzando i selettori :visiblee :hidden.

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

Se stai semplicemente agendo su un elemento in base alla sua visibilità, puoi semplicemente includere :visibleo :hiddennell'espressione del selettore. Per esempio:

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

4
chiedendomi perché nessuna risposta menziona il caso in cui l'elemento viene spostato dalla finestra visibile, come top:-1000px... Immagino sia un caso limite
jazzcat

295

Spesso quando si controlla se qualcosa è visibile o no, si procede immediatamente e si fa qualcos'altro. Il concatenamento di jQuery lo rende facile.

Quindi, se si dispone di un selettore e si desidera eseguire un'azione solo se è visibile o nascosto, è possibile utilizzare filter(":visible")o filter(":hidden")seguire concatenandolo con l'azione che si desidera eseguire.

Quindi invece di ifun'affermazione, come questa:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

O più efficiente, ma anche più brutto:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

Puoi fare tutto in una riga:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

25
Nessun motivo per estrarre il nodo DOM nello snippet utilizzato nell'esempio e quindi riconsiderarlo. Meglio fare semplicemente: var $ button = $ ('# btnUpdate'); E poi nelle espressioni If basta usare il pulsante $ anziché $ (pulsante). Ha il vantaggio di memorizzare nella cache l'oggetto jQuery.
LocalPCGuy

1
ecco un semplice esempio jquerypot.com/…
Ketan Savaliya,

242

Il :visibleselettore secondo la documentazione di jQuery :

  • Hanno un displayvalore CSS di none.
  • Sono elementi della forma con type="hidden".
  • La loro larghezza e altezza sono esplicitamente impostate su 0.
  • Un elemento antenato è nascosto, quindi l'elemento non viene mostrato nella pagina.

Gli elementi con visibility: hiddeno opacity: 0sono considerati visibili, poiché continuano a consumare spazio nel layout.

Questo è utile in alcuni casi e inutile in altri, perché se vuoi verificare se l'elemento è visibile ( display != none), ignorando la visibilità dei genitori, scoprirai che farlo .css("display") == 'none'non è solo più veloce, ma restituirà anche il controllo di visibilità correttamente.

Se si desidera controllare la visibilità, invece di visualizzazione, è necessario utilizzare: .css("visibility") == "hidden".

Prendi anche in considerazione le note jQuery aggiuntive :

Poiché :visibleè un'estensione jQuery e non fa parte della specifica CSS, le query che utilizzano :visiblenon possono trarre vantaggio dall'aumento delle prestazioni fornito dal querySelectorAll()metodo DOM nativo . Per ottenere le migliori prestazioni quando si utilizza :visibleper selezionare gli elementi, selezionare prima gli elementi utilizzando un selettore CSS puro, quindi utilizzare .filter(":visible").

Inoltre, se sei preoccupato per le prestazioni, dovresti controllare Ora mi vedi ... mostra / nascondi prestazioni (2010-05-04). E usa altri metodi per mostrare e nascondere gli elementi.


214

Questo funziona per me e sto usando show()e hide()per rendere il mio div nascosto / visibile:

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

213

Come funziona la visibilità degli elementi e jQuery ;

Un elemento può essere nascosto con display:none, visibility:hiddeno opacity:0. La differenza tra questi metodi:

  • display:none nasconde l'elemento e non occupa spazio;
  • visibility:hidden nasconde l'elemento, ma occupa ancora spazio nel layout;
  • opacity:0nasconde l'elemento come "visibilità: nascosto" e occupa ancora spazio nel layout; l'unica differenza è che l'opacità consente di rendere parzialmente trasparente un elemento;

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

    Metodi utili per attivare / disattivare jQuery:

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

20
Un'altra differenza tra visibility:hiddene opacity:0è che l'elemento risponderà comunque agli eventi (come i clic) con opacity:0. Ho imparato quel trucco creando un pulsante personalizzato per i caricamenti di file.
urraka,

1
anche se nascondi l'input con l'opacità: 0, viene comunque selezionato con il tasto Tab
YangombiUmpakati

161

Puoi anche farlo usando JavaScript semplice:

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

Appunti:

  1. Funziona ovunque

  2. Funziona per elementi nidificati

  3. Funziona con CSS e stili incorporati

  4. Non richiede un framework


6
Funziona in modo leggermente diverso da quello di jQuery; si ritiene visibility: hiddensia visibile .
alex,

4
È abbastanza facile cambiare il codice sopra per imitare il comportamento (probabilmente stupido) di jQuery. . . . . function isRendered (o) {if ((o.nodeType! = 1) || (o == document.body)) {return true;} if (o.currentStyle && o.currentStyle ["display"]! = "none") {return isRendered (o.parentNode);} else if (window.getComputedStyle) {if (document.defaultView.getComputedStyle (o, null) .getPropertyValue ("display")! = "none") {return isRendered (o.parentNode );}} return false;}
Matt Brock,

3
Certo, lo stavo solo aggiungendo a beneficio degli utenti che lo usavano senza scansionarne il codice. :)
alex

160

Vorrei usare la classe CSS .hide { display: none!important; }.

Per nascondere / mostrare, chiamo .addClass("hide")/.removeClass("hide"). Per controllare la visibilità, io uso .hasClass("hide").

È un modo semplice e chiaro per controllare / nascondere / mostrare elementi, se non prevedi di utilizzare metodi .toggle()o .animate()metodi.


11
.hasClass('hide')non controlla se un antenato del genitore è nascosto (il che lo renderebbe nascosto anche). Potresti farlo funzionare correttamente controllando se .closest('.hide').length > 0, ma perché reinventare la ruota?
nbrooks,

1
La variante che proponi restituisce se l'elemento è visibile su HTML, la mia variante restituisce se l'elemento è stato nascosto direttamente dal tuo codice javascript / motore di visualizzazione. Se sai che gli elementi padre non dovrebbero mai essere nascosti, usa .hasClass () per essere più severi e prevenire bug futuri. Se vuoi controllare non solo la visibilità ma anche il set di stati degli elementi, usa anche .hasClass (). In altri casi .closest () è migliore.
Evgeny Levin,

1
Perché non usi semplicemente .is (": visible")?
dont_trust_me,

138

Link dimostrativo

$('#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="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

Fonte:

Blogger Plug n Play - Strumenti e widget di jQuery: come vedere se Element è nascosto o visibile usando jQuery


1
@Adrew ma questo link mostra un esempio funzionante di questa funzione. Penso che una risposta pratica possa ponderare un'intera pagina di testo :)
Codice spia

133

Si può semplicemente usare l' attributo hiddeno visible, come:

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

Oppure puoi semplificare lo stesso con è come segue.

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

130

ebdivdovrebbe essere impostato su style="display:none;". Funziona sia per mostrare che per nascondere:

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

118

Un'altra risposta che dovresti prendere in considerazione è se stai nascondendo un elemento, dovresti usare jQuery , ma invece di nasconderlo effettivamente, rimuovi l'intero elemento, ma copi il suo contenuto HTML e il tag stesso in una variabile jQuery, e quindi tutto quello che devi fare è verificare se sullo schermo è presente un tag simile, usando il normale if (!$('#thetagname').length).


100

Quando si testa un elemento con un :hiddenselettore in jQuery, è necessario considerare che un elemento posizionato in modo assoluto può essere riconosciuto come nascosto sebbene i loro elementi figlio siano visibili .

Questo sembra in qualche modo controintuitivo in primo luogo, anche se dare un'occhiata più da vicino alla documentazione di jQuery fornisce le informazioni pertinenti:

Gli elementi possono essere considerati nascosti per diversi motivi: [...] la loro larghezza e altezza sono esplicitamente impostate su 0. [...]

Quindi questo ha davvero senso rispetto al modello a scatola e allo stile calcolato per l'elemento. Anche se larghezza e altezza non sono impostate esplicitamente su 0, possono essere impostate implicitamente .

Dai un'occhiata al seguente esempio:

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>


Aggiornamento per jQuery 3.x:

Con jQuery 3 il comportamento descritto cambierà! Gli elementi saranno considerati visibili se hanno caselle di layout, comprese quelle di larghezza e / o altezza zero.

JSFiddle con jQuery 3.0.0-alpha1:

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

Lo stesso codice JavaScript avrà quindi questo output:

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

90

Questo potrebbe funzionare:

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

7
Che lingua / dialetto / biblioteca è questa? Non ho familiarità con questa sintassi in JS ...
nbrooks,

74

Esempio:

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


66

Per verificare se non è visibile, utilizzo !:

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

Oppure il seguente è anche sam, salvando il selettore jQuery in una variabile per ottenere prestazioni migliori quando è necessario più volte:

var $book = $('#book')

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

1
Come hai stabilito che il salvataggio di un selettore in variabile è molto più veloce?
Ilia Rostovtsev,

3
Ciao @Ilia Rostovtsev jsperf.com/caching-jquery-selectors Lì puoi eseguire il test. Comunque è bello averlo nella cache in modo che sia possibile accedervi più velocemente
Matthias Wegtun,

2
Questo è adatto se si desidera utilizzare una singola variabile durante l'intero processo anziché chiamare e chiamare lo stesso oggetto.
Kenneth Palaganas,

60

Usa la commutazione di classe, non la modifica dello stile. . .

L'uso delle classi designate per "nascondere" gli elementi è facile e anche uno dei metodi più efficienti. Commutare una classe "nascosta" con uno Displaystile di "nessuna" sarà più veloce della modifica diretta di quello stile. Ho spiegato alcune di queste cose in modo abbastanza approfondito nella domanda Stack Overflow. Trasformare due elementi visibili / nascosti nello stesso div .


Best practice e ottimizzazione JavaScript

Ecco un video davvero illuminante di Google Tech Talk dell'ingegnere front-end di Google Nicholas Zakas:


60

Esempio di utilizzo del controllo visibile per adblocker attivato:

$(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" è un ID che blocca adblocker. Quindi controllandolo se è visibile puoi rilevare se il blocco degli annunci è attivato.


58

Dopotutto, nessuno degli esempi mi va bene, quindi ho scritto il mio.

Test (nessun supporto di Internet Explorer filter:alpha):

a) Controllare se il documento non è nascosto

b) Verifica se un elemento ha larghezza / altezza / opacità pari a zero o display:none/ visibility:hiddenin stili incorporati

c) Verifica se il centro (anche perché è più veloce del test di ogni pixel / angolo) dell'elemento non è nascosto da altri elementi (e da tutti gli antenati, ad esempio: overflow:hidden/ scroll / un elemento sopra un altro) o dai bordi dello schermo

d) Verifica se un elemento ha larghezza / altezza / opacità o display:none/ visibilità pari a zero : nascosto negli stili calcolati (tra tutti gli antenati)

Testato su

Android 4.4 (browser nativo / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (modalità documento Internet Explorer 5-11 + Internet Explorer 8 su un macchina virtuale) e 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;
    }
})();

Come usare:

is_visible(elem) // boolean

50

Devi controllare sia ... Display che visibilità:

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

Se controlliamo $(this).is(":visible"), jQuery verifica automaticamente entrambe le cose.


41

Forse puoi fare qualcosa del genere

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


37

Controlla semplicemente la visibilità controllando un valore booleano, come:

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

Ho usato questo codice per ogni funzione. Altrimenti puoi usare is(':visible')per controllare la visibilità di un elemento.


34

Perché Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(come descritto per jQuery: visible Selector ) - possiamo verificare se l'elemento è davvero visibile in questo modo:

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


30

È possibile creare una funzione per verificare la visibilità / visualizzare gli attributi al fine di valutare se l'elemento viene mostrato nell'interfaccia utente o meno.

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

Fiddle di lavoro


29

Inoltre, ecco un'espressione condizionale ternaria per controllare lo stato dell'elemento e quindi per attivarlo:

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

4
O, no, basta sbarazzarsi di tutto il condizionale e dire $('elementToToggle').toggle('slow');...:)
nbrooks

29
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.