javascript - viewport visible if check Wie überprüfe ich, ob ein Element in jQuery verborgen ist?




15 Answers

Sie können die hidden Auswahl verwenden:

// Matches all elements that are hidden
$('element:hidden')

Und der visible Wähler:

// Matches all elements that are visible
$('element:visible')
jquery is display none

Die Sichtbarkeit eines Elements kann mit den Funktionen .hide() , .show() oder .toggle() .

Wie würden Sie testen, ob ein Element sichtbar oder verborgen ist?




Keine dieser Antworten geht auf die Frage ein, die ich als die Frage verstehe, nach der ich suchte: "Wie gehe ich mit Elementen um, die visibility: hidden ?" . Weder :visible noch :hidden wird damit umgehen, da beide in der Dokumentation nach Anzeigen suchen. Soweit ich feststellen konnte, gibt es keinen Selektor für die CSS-Sichtbarkeit. So habe ich es gelöst (Standard-jQuery-Selektoren, möglicherweise eine etwas kompaktere Syntax):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});



Wenn Sie prüfen, ob etwas sichtbar ist oder nicht, werden Sie oft sofort fortfahren und etwas anderes damit tun. jQuery-Verkettung macht dies einfach.

Wenn Sie also eine Auswahl haben und nur dann eine Aktion ausführen möchten, wenn sie sichtbar oder ausgeblendet ist, können Sie filter(":visible") oder filter(":hidden") und diese mit der gewünschten Aktion verketten nehmen.

Also statt einer if Anweisung wie folgt:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

Oder effizienter, aber noch hässlicher:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

Sie können alles in einer Zeile machen:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });



Dies funktioniert für mich, und ich benutze show() und hide() , um mein Div sichtbar zu machen:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}



Ich würde die CSS-Klasse verwenden .hide { display: none!important; } .hide { display: none!important; } .

Zum Ausblenden / .addClass("hide")/.removeClass("hide") rufe ich .addClass("hide")/.removeClass("hide") . Um die Sichtbarkeit zu überprüfen, verwende ich .hasClass("hide") .

Es ist eine einfache und klare Möglichkeit, Elemente zu überprüfen / auszublenden / .toggle() , wenn Sie nicht .toggle() , die .toggle() oder .animate() Methoden zu verwenden.




Man kann einfach das hidden oder visible Attribut verwenden, wie:

$('element:hidden')
$('element:visible')

Oder Sie können das Gleiche wie folgt vereinfachen.

$(element).is(":visible")



$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

Quelle:

Blogger-Plug-in-Play - jQuery-Tools und Widgets: So können Sie mit jQuery sehen, ob ein Element ausgeblendet oder sichtbar ist

jsFiddle:

JSFiddle - ipsjolly - k4WWj




Beim Testen eines Elements mit :hidden Selector in jQuery sollte berücksichtigt werden, dass ein absolut positioniertes Element möglicherweise als ausgeblendet erkannt wird, obwohl seine untergeordneten Elemente sichtbar sind .

Dies erscheint zunächst etwas kontrapunktisch - wenn Sie jedoch die jQuery-Dokumentation genauer betrachten, erhalten Sie die relevanten Informationen:

Elemente können aus verschiedenen Gründen als verborgen betrachtet werden: [...] Ihre Breite und Höhe sind explizit auf 0 gesetzt. [...]

Das macht also in Bezug auf das Box-Modell und den berechneten Stil des Elements einen Sinn. Auch wenn Breite und Höhe nicht explizit auf 0 gesetzt sind, können sie implizit festgelegt werden .

Schauen Sie sich das folgende Beispiel an:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>

AKTUALISIERUNG FÜR JQUERY 3.x:

Mit jQuery 3 ändert sich das beschriebene Verhalten! Elemente werden als sichtbar betrachtet, wenn sie über Layoutfelder verfügen, einschließlich der Breite und / oder Höhe von Null.

JSFiddle mit jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

Der gleiche JS wird dann diese Ausgabe haben:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false



Beispiel:

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>




Verwenden Sie die Klassenumschaltung, nicht die Stilbearbeitung. . .

Die Verwendung von Klassen zum "Ausblenden" von Elementen ist einfach und auch eine der effizientesten Methoden. Das Umschalten einer Klasse "verborgen" mit einem Display "Keine" führt zu einer schnelleren Bearbeitung als die direkte Bearbeitung dieses Stils. Ich habe einiges davon in der -Frage ausführlich erklärt. Drehen von zwei Elementen im selben Div sichtbar / verborgen .

JavaScript Best Practices und Optimierung

Hier ist ein wirklich aufschlussreiches Video eines Google Tech Talk von Nicholas Zakas, dem Front-End-Ingenieur von Google:




Beispiel für die Verwendung der sichtbaren Prüfung für Adblocker ist aktiviert:

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

"ablockercheck" ist eine ID, die Adblocker blockiert. Wenn Sie also prüfen, ob es sichtbar ist, können Sie feststellen, ob der Adblocker aktiviert ist.




Vielleicht kannst du so etwas tun

$(document).ready(function() {
   var visible = $('#tElement').is(':visible');

   if(visible) {
      alert("visible");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>




if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}



Überprüfen Sie einfach die Sichtbarkeit, indem Sie nach einem booleschen Wert suchen, z.

if (this.hidden === false) {
    // Your code
}

Ich habe diesen Code für jede Funktion verwendet. Andernfalls können Sie is(':visible') um die Sichtbarkeit eines Elements zu überprüfen.




Hier ist auch ein ternärer bedingter Ausdruck, um den Status des Elements zu überprüfen und dann umzuschalten:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });



Related