Wie prüfe ich, ob ein Element in jQuery ausgeblendet ist?

Question

Ist es möglich, die Sichtbarkeit eines Elements umzuschalten, indem man die Funktionen .hide() , .show() ou .toggle() ?

Wie würden Sie testen, ob ein Element visible ou hidden ?

Answer 1

Dies ist eine Option, um zu prüfen, ob der Tag sichtbar ist oder nicht

 // using a pure CSS selector  
   if ($('p:visible')) {  
      alert('Paragraphs are visible (checked using a CSS selector) !');  
   };  

   // using jQuery's is() method  
   if ($('p').is(':visible')) {  
      alert('Paragraphs are visible (checked using is() method)!');  
   };  

   // using jQuery's filter() method  
   if ($('p').filter(':visible')) {  
      alert('Paragraphs are visible (checked using filter() method)!');  
   };  

   // you can use :hidden instead of :visible to reverse the logic and check if an element is hidden  
   // if ($('p:hidden')) {  
   //    do something  
   // };

Answer 2

$( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});

API-Dokumentation: sichtbarer Selektor

Answer 3

Sie können eine Klasse nur hinzufügen, wenn sie sichtbar ist. Eine Klasse hinzufügen, show . Dann prüfen Sie, ob sie eine Klasse haben:

$('#elementId').hasClass('show');

Sie gibt true zurück, wenn Sie die show Klasse.

Fügen Sie CSS wie folgt hinzu:

.show{ display: block; }

Answer 4

Es gibt zu viele Methoden, um nach verborgenen Elementen zu suchen. Dies ist die beste Wahl (die ich Ihnen gerade empfohlen habe):

Verwenden Sie jQuery, um ein Element "display:none" in CSS für versteckt zu machen.

Der Punkt ist:

$('element:visible')

Und ein Beispiel für die Anwendung:

$('element:visible').show();

Answer 5

Prüfen Sie einfach, ob die display Attribut (oder visibility je nachdem, welche Art der Unsichtbarkeit Sie bevorzugen). Beispiel:

if ($('#invisible').css('display') == 'none') {
    // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}