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

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

Le code ci-dessus s’exécute correctement dans Firefox, mais ne semble pas fonctionner dans Chrome. Dans Chrome, il affiche .is(":visible") = false même si c’est true .

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

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

Il semble que jQuery :visible sélecteur :visible ne fonctionne pas pour certains éléments en ligne dans Chrome.
La solution consiste à append un style d’affichage, tel que "block" ou "inline-block" pour le faire fonctionner.

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

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

Éléments avec visibility: hidden ou opacity: 0 sont considérés comme visibles, car ils consumnt encore de l’espace dans la mise en page.

Les éléments qui ne sont pas dans un document sont considérés comme cachés. jQuery n’a aucun moyen de savoir si elles seront visibles lorsqu’elles seront ajoutées à un document, car cela dépend des styles applicables.

Tous les éléments d’options sont considérés comme cachés, quel que soit leur état sélectionné.

Lors des animations qui masquent un élément, l’élément est considéré comme visible jusqu’à la fin de l’animation. Lors des animations pour afficher un élément, l’élément est considéré comme visible au début de l’animation.

En d’autres termes, les éléments qui consumnt de l’espace sont visibles, ce qui signifie que l’élément doit avoir une largeur et une hauteur pour consumr de l’espace et être visible.
D’un autre côté, même si la visibility est hidden ou que l’opacité est nulle, elle est toujours :visible pour jQuery car elle consum de l’espace, ce qui peut être déroutant lorsque le CSS indique explicitement que sa visibilité est masquée.

La manière la plus simple de le voir est que si vous pouvez voir l’élément à l’écran, même si vous ne pouvez pas voir son contenu, c’est transparent, etc., c’est visible, c’est-à-dire qu’il prend de la place.

J’ai un peu nettoyé votre balisage et ajouté un style d’affichage ( c.-à-d. Régler l’affichage des éléments sur “bloquer” etc ), et cela fonctionne pour moi:

VIOLON

Référence API officielle pour :visible


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

jQuery 3 modifie légèrement la signification de :visible (et donc de :hidden ).
A partir de cette version, les éléments seront pris en compte :visible s’ils ont des boîtes de mise en page, y compris celles de largeur et / ou de hauteur nulles. Par exemple, les éléments br et les éléments en ligne sans contenu seront sélectionnés par le sélecteur :visible .

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 fournit de mauvais résultats en chrome, vous pouvez simplement vous fier à la vérification de la règle css:

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

De plus, vous voudrez peut-être utiliser la dernière version de jQuery, car elle peut avoir des bogues provenant d’une ancienne version corrigée.

Si vous lisez les documents jquery, il y a de nombreuses raisons pour que quelque chose ne soit pas considéré comme visible / caché:

Ils ont une valeur d’affichage CSS de aucun.

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

Leur largeur et leur hauteur sont explicitement définies sur 0.

Un élément ancêtre est masqué, donc l’élément n’est pas affiché sur la page.

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

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

http://jsfiddle.net/tNjLb/

Internet Explorer, Chrome, Firefox …

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

Exemple complet:

        Full example: isVisible function   
Hello World!
Fernando Mosquera Catarecha
rate it!
Check isVisible('hello-world')

Check isVisible('fullname')

Check isVisible('vote')

Cordialement,

Fernando

Je suppose que cela a quelque chose à voir avec une bizarrerie dans notre HTML parce que d’autres endroits sur la même page fonctionnent très bien.

La seule façon de résoudre ce problème était de:

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

Il y a un cas étrange où si l’élément est défini pour display: inline le contrôle jQuery en display: inline pour la visibilité échoue.

Exemple:

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 show/hide ou toggle() devrait fonctionner correctement.

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

En général, je vis cette situation lorsque le parent de mon object est caché. par exemple quand le HTML est comme ceci:

   

si vous demandez si l’enfant est visible comme:

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

il retournera false parce que son parent n’est pas visible et que div ne sera pas visible, aussi.

Une solution multi-navigateur / version pour déterminer si un élément est visible consiste à append / supprimer une classe css à l’élément sur show / hide. L’état par défaut (visible) de l’élément pourrait être par exemple comme ceci:

Span text

Puis sur hide, retirez la classe:

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

En spectacle, ajoutez-le à nouveau:

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

Ensuite, pour déterminer si l’élément est visible, utilisez ceci:

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

Cela résout également les implications de performance, qui peuvent survenir lors de l’utilisation intensive du sélecteur “: visible”, qui sont pointées dans la documentation de jQuery:

L’utilisation intensive de ce sélecteur peut avoir des conséquences sur les performances, car cela peut forcer le navigateur à restituer la page avant de pouvoir déterminer la visibilité. Le suivi de la visibilité des éléments via d’autres méthodes, en utilisant une classe par exemple, peut fournir de meilleures performances.

Documentation officielle de l’API jQuery pour le sélecteur “: visible”

J’ai ajouté le style suivant sur le parent et .is (“: visible”) a fonctionné.

display: inline-block;

Si un élément est enfant d’un élément masqué, (“: visible”) renverra true, ce qui est incorrect.

Je viens de corriger cela en ajoutant “display: inherit” à l’élément enfant. Cela va le réparer pour moi:

 

et le CSS:

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

Maintenant, l’élément peut être activé et désactivé en modifiant la visibilité du parent, et $ (élément) .is (“: visible”) renverra la visibilité de l’élément parent

C’est le morceau de code de jquery.js qui s’exécute quand is (“: visible”) s’appelle:

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

Comme vous pouvez le voir, il utilise plus que la propriété d’affichage CSS. Cela dépend aussi de la largeur et de la hauteur du contenu de l’élément. Par conséquent, assurez-vous que l’élément a une certaine largeur et hauteur. Et pour ce faire, vous devrez peut-être définir la propriété display sur "inline-block" ou "block"

Je dois utiliser la visibilité: instancié caché de l’ affichage: aucun parce que la visibilité prend des événements, alors que l’ affichage ne le fait pas.

Donc, je fais .attr('visibility') === "visible"