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

Denn Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (wie beschrieben für jQuery :visible Selektor ) - wir können prüfen, ob das Element wirklich auf diese Weise sichtbar:

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});

Answer 2

Was aber, wenn das CSS des Elements wie folgt aussieht?

.element{
    position: absolute;left:-9999;    
}

Also diese Antwort auf eine Stack Overflow-Frage So prüfen Sie, ob ein Element außerhalb des Bildschirms liegt sollte ebenfalls berücksichtigt werden.

Answer 3

Es kann eine Funktion erstellt werden, die auf Sichtbarkeits-/Anzeigeattribute prüft, um festzustellen, ob das Element auf der Benutzeroberfläche angezeigt wird oder nicht.

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

Arbeitsfiedel

Answer 4

Außerdem gibt es einen ternären bedingten Ausdruck, um den Zustand des Elements zu prüfen und es dann umzuschalten:

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

Answer 5

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