web-dev-qa-db-fra.com

jQuery `.is (": visible ")` ne fonctionne pas dans 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>

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

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

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

jquerygoogle-chrome
200
Saad Bashir

Il semble que le sélecteur :visible de jQuery ne fonctionne pas pour certains éléments en ligne de Chrome. La solution consiste à ajouter 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 par rapport à de nombreux développeurs:

Les éléments sont considérés comme visibles s'ils consomment 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 nul pour consommer de l'espace et être visible.

Les éléments avec visibility: hidden ou opacity: 0 sont considérés comme visibles, car ils occupent toujours de l'espace dans la présentation.

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

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

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

Lors d'animations masquant un élément, celui-ci est considéré comme visible jusqu'à la fin de l'animation. Lors des animations pour montrer un élément, l'élément est considéré visible au début de l'animation.

Le moyen le 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, il est transparent, etc., il est visible, c’est-à-dire qu’il occupe de la place.

J'ai un peu nettoyé votre balisage et ajouté un style d'affichage (, c'est-à-dire que l'affichage des éléments est "bloquer", etc. ), et cela fonctionne pour moi:

VIOLON

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

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

jQuery 3 modifie légèrement le sens de :visible (et donc de :hidden).
À partir de cette version, les éléments seront considérés :visible s’ils ont des zones de présentation, y compris celles de largeur et/ou hauteur zéro. Par exemple, les éléments br et les éléments en ligne sans contenu seront sélectionnés par le sélecteur :visible.

268
adeneo

Je ne sais pas pourquoi votre code ne fonctionne pas sur chrome, mais je vous suggère d'utiliser certaines 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 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 le le dernier jQuery car il est possible que des bogues de l'ancienne version soient corrigés.

60
gion_13

Je suppose que cela a quelque chose à voir avec une bizarrerie dans notre code HTML, car d’autres endroits sur la même page fonctionnent parfaitement.

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

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

Il existe un cas étrange dans lequel, si l'élément est défini sur display: inline, la vérification de visibilité de jQuery é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 plus de show/hide ou toggle() devrait fonctionner correctement.

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

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:

<!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>

Cordialement,

Fernando

7
Fernando

Si vous lisez la documentation JQuery, il y a de nombreuses raisons pour que quelque chose ne soit pas considéré 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 définies sur 0.

Un élément ancêtre étant masqué, 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/

7
xaxxon

Une solution inter-navigateur/version permettant de déterminer si un élément est visible consiste à ajouter/supprimer une classe css à l’élément à afficher/masquer. L'état par défaut (visible) de l'élément pourrait par exemple être le suivant:

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

Puis sur hide, supprimez la classe:

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

Sur le 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 conséquences sur les performances, qui peuvent survenir lors d'une utilisation intensive du sélecteur ": visible", indiqué dans la documentation de jQuery:

L'utilisation intensive de ce sélecteur peut avoir des conséquences sur les performances, car il peut obliger le navigateur à rendre la page à nouveau avant de pouvoir déterminer la visibilité. Suivre la visibilité des éléments via d'autres méthodes, en utilisant une classe par exemple, peut offrir de meilleures performances.

Documentation officielle de l'API jQuery pour le sélecteur ": visible"

3
Alex

Généralement, je vis cette situation quand 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 car son parent n'est pas visible, de sorte que div ne sera pas visible également.

3
cenk ebret

J'ai ajouté le style suivant sur le parent et .is (": visible") a fonctionné.

affichage: inline-block;

1
Horatiu

J'ai besoin d'utiliser visibilité: caché au lieu de affichage: aucun car la visibilité prend des événements, alors que afficher ne le fait pas.

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

0
mitjajez

C'est le morceau de code de jquery.js qui s'exécute quand is (": visible") est appelé:

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 constater, il utilise plus que la propriété d’affichage CSS. Cela dépend également 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 une certaine hauteur. Et pour cela, vous devrez peut-être définir la propriété display sur "inline-block" ou "block"

0
hkulur

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:

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

et le CSS:

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

Désormais, l'élément peut être efficacement activé et désactivé en modifiant la visibilité du parent. $ (Element) .is (": visible") renvoie la visibilité de l'élément parent.

0
patrick