risposta-alla-domanda-sullo-sviluppo-web-bd.com

jQuery `.is (": visible ")` non funziona in Chrome

if ($("#makespan").is(":visible") == true) { 
    var make = $("#make").val(); 
}
else {
    var make = $("#othermake").val(); 
}

Make:<span id=makespan><select id=make></select><span id=othermakebutton class=txtbutton>Other?</span></span><span id=othermakespan style="display: none;"><input type=text name=othermake id=othermake>&nbsp;-&nbsp;<span id=othermakecancel class=txtbutton>Cancel</span></span>

Il codice sopra funziona liscio in Firefox, ma non sembra funzionare in Chrome. In Chrome mostra .is(":visible") = false anche quando è true.

Sto usando la seguente versione di jQuery: jquery-1.4.3.min.js

jsFiddle Link: http://jsfiddle.net/WJU2r/4/

jquerygoogle-chrome
197
Saad Bashir

Sembra che il selettore :visible di jQuery non funzioni per alcuni elementi inline in Chrome. La soluzione è aggiungere uno stile di visualizzazione, come "block" o "inline-block" per farlo funzionare.

Si noti inoltre che jQuery ha una definizione leggermente diversa di ciò che è visibile rispetto a molti sviluppatori:

Gli elementi sono considerati visibili se consumano spazio nel documento.
Gli elementi visibili hanno una larghezza o un'altezza maggiore di zero.

In altre parole, un elemento deve avere una larghezza e un'altezza diversa da zero per consumare spazio ed essere visibile.

Gli elementi con visibility: hidden o opacity: 0 sono considerati visibili, dal momento che occupano ancora spazio nel layout.

D'altra parte, anche se visibility è impostata su hidden o l'opacità è zero, è ancora :visible su jQuery mentre consuma spazio, il che può generare confusione quando il CSS dice esplicitamente che la sua visibilità è nascosta.

Gli elementi che non sono in un documento sono considerati nascosti; jQuery non ha modo di sapere se saranno visibili quando vengono aggiunti ad un documento poiché dipende dagli stili applicabili.

Tutti gli elementi opzione sono considerati nascosti, indipendentemente dal loro stato selezionato.

Durante le animazioni che nascondono un elemento, l'elemento è considerato visibile fino alla fine dell'animazione. Durante le animazioni per mostrare un elemento, l'elemento è considerato visibile all'inizio dell'animazione.

Il modo più semplice per guardarlo è che se riesci a vedere l'elemento sullo schermo, anche se non riesci a vederne il contenuto, è trasparente, ecc., È visibile, cioè occupa spazio.

Ho ripulito un po 'il tuo markup e ho aggiunto uno stile di visualizzazione ( i.e. Impostando la visualizzazione degli elementi su "block" etc ), e questo funziona per me:

FIDDLE

Riferimento API ufficiale per :visible

A partire da jQuery 3, la definizione di :visible è leggermente cambiata

jQuery 3 modifica leggermente il significato di :visible (e quindi di :hidden).
A partire da questa versione, gli elementi saranno considerati :visible se hanno caselle di layout, comprese quelle di larghezza e/o altezza zero. Ad esempio, br elementi e elementi inline senza contenuto saranno selezionati dal selettore :visible.

266
adeneo

Non so perché il tuo codice non funzioni su Chrome, ma ti suggerisco di utilizzare alcuni accorgimenti:

$el.is(':visible') === $el.is(':not(:hidden)');

o

$el.is(':visible') === !$el.is(':hidden');

Se sei sicuro che jQuery ti dà dei brutti risultati in Chrome, puoi semplicemente fare affidamento sul controllo delle regole css:

if($el.css('display') !== 'none') {
    // i'm visible
}

Inoltre, potresti voler usare l'ultimo jQuery perché potrebbe essere stato corretto un bug della versione precedente.

60
gion_13

Presumo che abbia qualcosa a che fare con una stranezza nel nostro HTML perché altri posti nella stessa pagina funzionano bene.

L'unico modo in cui sono stato in grado di risolvere questo problema era di fare:

if($('#element_id').css('display') == 'none')
{
   // Take element is hidden action
}
else
{
   // Take element is visible action
}
8
Chris Dutrow

C'è un caso strano in cui se l'elemento è impostato su display: inline il controllo jQuery per visibilità non riesce.

Esempio:

CSS

#myspan {display: inline;}

jQuery 

$('#myspan').show(); // Our element is `inline` instead of `block`
$('#myspan').is(":visible"); // This is false

Per risolvere il problema è possibile nascondere l'elemento in jQuery e rispetto a show/hide o toggle() dovrebbe funzionare correttamente.

$('#myspan').hide()
$('#otherElement').on('click', function() {
    $('#myspan').toggle();
});
8
Alex Rashkov

Internet Explorer, Chrome, Firefox ...

Funzione Cross Browser "isVisible ()"

//check if exist and is visible
function isVisible(id) {
    var element = $('#' + id);
    if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
        return true;
    } else {
        return false;
    }
}

Esempio completo:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            //check if exist and is visible
            function isVisible(id) {
                var element = $('#' + id);
                if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
                    return true;
                } else {
                    return false;
                }
            }

            function check(id) {
                if (isVisible(id)) {
                    alert('visible: true');
                } else {
                    alert('visible: false');
                }
                return false;
            }
        </script>

        <style type="text/css">
            #fullname{
                display: none;
            }
            #vote{
                visibility: hidden;
            }
        </style>
        <title>Full example: isVisible function</title>
    </head>
    <body>
        <div id="hello-world">
            Hello World!
        </div>
        <div id="fullname">
            Fernando Mosquera Catarecha
        </div>
        <div id="vote">
            rate it!
        </div>
        <a href="#" onclick="check('hello-world');">Check isVisible('hello-world')</a><br /><br />
        <a href="#" onclick="check('fullname');">Check isVisible('fullname')</a><br /><br />
        <a href="#" onclick="check('vote');">Check isVisible('vote')</a>
    </body>
</html>

Saluti,

Fernando

7
Fernando

Se leggi i documenti di jquery, ci sono numerose ragioni per cui qualcosa non deve essere considerato visibile/nascosto:

Hanno un valore di visualizzazione CSS pari a none.

Sono elementi di forma con type = "hidden".

La loro larghezza e altezza sono esplicitamente impostate su 0.

Un elemento antenato è nascosto, quindi l'elemento non è mostrato nella pagina.

http://api.jquery.com/visible-selector/

Ecco un piccolo esempio di jsfiddle con un elemento visibile e uno nascosto:

http://jsfiddle.net/tNjLb/

7
xaxxon

Una soluzione cross browser/versione per determinare se un elemento è visibile, consiste nell'aggiungere/rimuovere una classe css all'elemento in mostra/nascondi. Lo stato predefinito (visibile) dell'elemento potrebbe essere ad esempio come questo:

<span id="span1" class="visible">Span text</span>

Quindi, nascondi, rimuovi la classe:

$("#span1").removeClass("visible").hide();

In mostra, aggiungilo di nuovo:

$("#span1").addClass("visible").show();

Quindi per determinare se l'elemento è visibile, usa questo:

if ($("#span1").hasClass("visible")) { // do something }

Questo risolve anche le implicazioni sulle prestazioni, che possono verificarsi in caso di utilizzo intensivo del selettore ": visible", che è indicato nella documentazione di jQuery:

L'uso intensivo di questo selettore può avere implicazioni in termini di prestazioni, poiché potrebbe costringere il browser a eseguire nuovamente il rendering della pagina prima che possa determinare la visibilità. Monitorare la visibilità degli elementi tramite altri metodi, utilizzando una classe per esempio, può fornire prestazioni migliori.

Documentazione ufficiale di jQuery API per il selettore ": visible"

3
Alex

Generalmente vivo questa situazione quando il genitore del mio oggetto è nascosto. per esempio quando l'html è così:

    <div class="div-parent" style="display:none">
        <div class="div-child" style="display:block">
        </div>
    </div>

se chiedi se il bambino è visibile come:

    $(".div-child").is(":visible");

restituirà false perché il suo genitore non è visibile in modo tale che div non sia visibile, anche.

3
cenk ebret

Ho aggiunto il prossimo stile sul genitore e .is (": visible") ha funzionato.

display: blocco in linea;

1
Horatiu

Devo usare visibilità: hidden invece di display: none perché visibility prende gli eventi, mentre display non lo fa.

Quindi faccio .attr('visibility') === "visible"

0
mitjajez

Questa è la parte di codice di jquery.js che viene eseguita quando è chiamato (": visible"):

if (jQuery.expr && jQuery.expr.filters){

    jQuery.expr.filters.hidden = function( elem ) {
        return ( elem.offsetWidth === 0 && elem.offsetHeight === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
    };

    jQuery.expr.filters.visible = function( elem ) {
        return !jQuery.expr.filters.hidden( elem );
    };
}

Come puoi vedere, utilizza più della semplice proprietà di visualizzazione CSS. Dipende anche dalla larghezza e dall'altezza del contenuto dell'elemento. Quindi, assicurati che l'elemento abbia larghezza e altezza. E per fare ciò, potrebbe essere necessario impostare la proprietà display su "inline-block" o "block"

0
hkulur

Se un elemento è figlio di un elemento nascosto (": visible") restituirà true, che è errato.

Ho appena risolto questo problema aggiungendo "display: inherit" all'elemento figlio. Questo lo ha risolto per me:

<div class="parent">
   <div class="child">
   </div>
<div>

e il CSS:

.parent{
   display: hidden;
}
.child{
   display: inherit;
}

Ora l'elemento può essere attivato e disattivato in modo efficace modificando la visibilità del genitore e $ (elemento) .is (": visibile") restituirà la visibilità dell'elemento principale

0
patrick