jQuery `.is(":visible")` ne fonctionne pas dans Chrome

Question

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>

Le code ci-dessus fonctionne bien dans Firefox, mais ne semble pas fonctionner dans Chrome. Dans Chrome, il affiche .is(":visible") = false même lorsque c'est true .

J'utilise la version suivante de jQuery : jquery-1.4.3.min.js.

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

Answer 1

Il semblerait que la méthode de jQuery :visible ne fonctionne pas pour certains éléments en ligne dans Chrome. La solution consiste à ajouter un style d'affichage, tel que "block" o "inline-block" pour que ça marche.

Notez également que jQuery a une définition de ce qui est visible quelque peu différente de celle de nombreux développeurs :

Les éléments sont considérés comme visibles s'ils occupent de l'espace dans le document.
Les éléments visibles ont une largeur ou une hauteur supérieure à zéro.

En d'autres termes, un élément doit avoir une largeur et une hauteur non nulles pour consommer de l'espace et être visible.

Éléments avec visibility: hidden o opacity: 0 sont considérés comme visibles, puisqu'ils consomment toujours de l'espace dans la mise en page.

D'autre part, même si son visibility est réglé sur hidden ou l'opacité est de zéro, c'est toujours :visible à jQuery car il consomme de l'espace, ce qui peut prêter à confusion lorsque le CSS indique explicitement que sa visibilité est cachée.

Les éléments qui ne sont pas dans un document sont considérés comme cachés. n'a pas la possibilité de savoir s'ils seront visibles lorsqu'ils seront ajoutés à un document. car cela dépend des styles applicables.

Tous les éléments d'option sont considérés comme cachés, quel que soit leur état de sélection. état sélectionné.

Pendant les animations qui masquent un élément, celui-ci est considéré comme visible jusqu'à la fin de l'animation. visible jusqu'à la fin de l'animation. Pendant les animations qui affichent un élément, l'élément est considéré comme visible au début de l'animation. l'animation.

La façon la plus simple de voir les choses est que si vous pouvez voir l'élément à l'écran, même si vous ne pouvez pas voir son contenu, s'il est transparent, etc., il est visible, c'est-à-dire qu'il prend de la place.

J'ai nettoyé un peu votre balisage et ajouté un style d'affichage ( Par exemple, en réglant l'affichage des éléments sur "block", etc. ), et cela fonctionne pour moi :

FIDDLE

Référence officielle de l'API pour :visible

---

À partir de jQuery 3, la définition de l'élément :visible a légèrement changé

jQuery 3 modifie légèrement la signification de l'expression :visible (et donc de :hidden ).
À partir de cette version, les éléments suivants seront pris en compte :visible s'ils ont des cases de mise en page, y compris celles dont la largeur et/ou de hauteur nulle. Par exemple, br et les éléments inline sans contenu seront sélectionnés par la fonction :visible sélecteur.

Answer 2

Je ne sais pas pourquoi votre code ne fonctionne pas sur chrome, mais je vous suggère d'utiliser des solutions de contournement :

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

ou

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

Si vous êtes certain que jQuery vous donne de mauvais résultats dans chrome, vous pouvez simplement vous fier à la vérification des règles css :

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

De plus, vous pourriez vouloir utiliser le Dernier jQuery parce que les bogues de l'ancienne version ont peut-être été corrigés.

Answer 3

Il y a un cas bizarre où si l'élément est défini sur display: inline la vérification de la visibilité par jQuery échoue.

Ejemplo:

CSS

#myspan {display: inline;}

jQuery

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

Pour résoudre ce problème, vous pouvez masquer l'élément dans jQuery et puis show/hide o toggle() devrait fonctionner correctement.

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

Answer 4

Si vous lisez la documentation de jquery, il existe de nombreuses raisons pour lesquelles un élément n'est pas considéré comme visible/caché :

Ils ont une valeur d'affichage CSS de none.

Ce sont des éléments de formulaire avec type="hidden".

Leur largeur et leur hauteur sont explicitement fixées à 0.

Un élément ancêtre est masqué, de sorte que l'élément n'apparaît pas sur la page.

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

Voici un petit exemple de jsfiddle avec un élément visible et un élément caché :

http://jsfiddle.net/tNjLb/

Answer 5

Généralement, je vis cette situation lorsque le parent de mon objet est caché. par exemple quand le html est comme ceci :

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

si vous demandez si l'enfant est visible comme :

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

il retournera false parce que son parent n'est pas visible, donc la div ne sera pas visible non plus.