jQuery `.is(“:visible”)` funktioniert nicht 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>

Der obige Code läuft reibungslos in Firefox, scheint aber in Chrome nicht zu funktionieren. In Chrome wird es angezeigt .is(":visible") = false auch wenn es so ist true.

Ich verwende folgende jQuery-Version: jquery-1.4.3.min.js

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

Es scheint jQuery zu sein :visible Der Selektor funktioniert bei einigen Inline-Elementen in Chrome nicht. Die Lösung besteht darin, einen Anzeigestil hinzuzufügen, z "block" oder "inline-block" damit es funktioniert.

Beachten Sie auch, dass jQuery eine etwas andere Definition dessen hat, was sichtbar ist als viele Entwickler:

Elemente gelten als sichtbar, wenn sie Platz im Dokument beanspruchen.

Sichtbare Elemente haben eine Breite oder Höhe, die größer als Null ist.

Mit anderen Worten, ein Element muss eine Breite und Höhe ungleich Null haben, um Platz zu verbrauchen und sichtbar zu sein.

Elemente mit visibility: hidden oder opacity: 0 werden als sichtbar betrachtet, da sie immer noch Platz im Layout beanspruchen.

Andererseits, auch wenn es sein visibility ist eingestellt auf hidden oder die Opazität ist Null, es ist still :visible zu jQuery, da es Speicherplatz verbraucht, was verwirrend sein kann, wenn das CSS ausdrücklich sagt, dass seine Sichtbarkeit ausgeblendet ist.

Elemente, die sich nicht in einem Dokument befinden, gelten als ausgeblendet; jQuery hat keine Möglichkeit zu wissen, ob sie sichtbar sind, wenn sie an ein Dokument angehängt werden, da dies von den anwendbaren Stilen abhängt.

Alle Optionselemente gelten als ausgeblendet, unabhängig von ihrem ausgewählten Status.

Bei Animationen, die ein Element ausblenden, wird das Element bis zum Ende der Animation als sichtbar betrachtet. Bei Animationen zum Anzeigen eines Elements gilt das Element zu Beginn der Animation als sichtbar.

Die einfache Art, es zu betrachten, ist, dass, wenn Sie das Element auf dem Bildschirm sehen können, auch wenn Sie seinen Inhalt nicht sehen können, es transparent ist usw., es sichtbar ist, dh es nimmt Platz ein.

Ich habe Ihr Markup ein wenig aufgeräumt und einen Anzeigestil hinzugefügt (dh die Anzeige der Elemente auf “blockieren” usw), und das funktioniert bei mir:

GEIGE

Offizielle API-Referenz für :visible

Ab jQuery 3 ist die Definition von :visible hat sich leicht verändert

jQuery 3 ändert leicht die Bedeutung von :visible (und damit von
:hidden).
Ab dieser Version werden Elemente berücksichtigt
:visible wenn sie Layoutboxen haben, einschließlich solcher mit einer Breite und/oder Höhe von null. Beispielsweise, br Elemente und Inline-Elemente ohne Inhalt werden von ausgewählt :visible Wähler.

Ich weiß nicht, warum Ihr Code auf Chrome nicht funktioniert, aber ich schlage vor, dass Sie einige Problemumgehungen verwenden:

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

oder

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

Wenn Sie sicher sind, dass jQuery in Chrome schlechte Ergebnisse liefert, können Sie sich einfach auf die CSS-Regelprüfung verlassen:

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

Außerdem möchten Sie vielleicht die verwenden neueste jQuery weil es möglicherweise Fehler von älteren Versionen behoben hat.

Ich nehme an, es hat etwas mit einer Eigenart in unserem HTML zu tun, weil andere Stellen auf derselben Seite einwandfrei funktionieren.

Die einzige Möglichkeit, dieses Problem zu lösen, war Folgendes:

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

Es gibt einen seltsamen Fall, in dem das Element auf gesetzt ist display: inline die jQuery-Prüfung auf Sichtbarkeit schlägt fehl.

Beispiel:

CSS

#myspan {display: inline;}

jQuery

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

Um dies zu beheben, können Sie das Element in jQuery ausblenden und dann show/hide oder toggle() sollte gut funktionieren.

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

Internet Explorer, Chrome, Firefox…

Browserübergreifende Funktion “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;
    }
}

Vollständiges Beispiel:

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

Grüße,

Fernando

Wenn Sie die jquery-Dokumentation lesen, gibt es zahlreiche Gründe dafür, dass etwas nicht als sichtbar/versteckt gilt:

Sie haben einen CSS-Anzeigewert von none.

Sie sind Formularelemente mit type=”hidden”.

Ihre Breite und Höhe werden explizit auf 0 gesetzt.

Ein Vorgängerelement ist ausgeblendet, sodass das Element nicht auf der Seite angezeigt wird.

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

Hier ist ein kleines jsfiddle-Beispiel mit einem sichtbaren und einem versteckten Element:

http://jsfiddle.net/tNjLb/

Eine browser-/versionsübergreifende Lösung, um festzustellen, ob ein Element sichtbar ist, besteht darin, eine CSS-Klasse zu dem anzuzeigenden/auszublendenden Element hinzuzufügen/zu entfernen. Der standardmäßige (sichtbare) Zustand des Elements könnte beispielsweise so aussehen:

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

Entfernen Sie dann beim Ausblenden die Klasse:

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

Auf Show, fügen Sie es erneut hinzu:

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

Um dann festzustellen, ob das Element sichtbar ist, verwenden Sie Folgendes:

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

Dies löst auch die Auswirkungen auf die Leistung, die bei starker Verwendung des Selektors „:visible“ auftreten können, auf die in der jQuery-Dokumentation hingewiesen wird:

Die starke Verwendung dieses Selektors kann Auswirkungen auf die Leistung haben, da er den Browser dazu zwingen kann, die Seite neu zu rendern, bevor er die Sichtbarkeit bestimmen kann. Das Verfolgen der Sichtbarkeit von Elementen über andere Methoden, beispielsweise mithilfe einer Klasse, kann eine bessere Leistung bieten.

Offizielle jQuery-API-Dokumentation für den „:visible“-Selektor