webentwicklung-frage-antwort-db.com.de

jQuery if-Anweisung zum Überprüfen der Sichtbarkeit

Ich versuche, ein Skript zu schreiben, das div abhängig von der Sichtbarkeit anderer Elemente verbirgt/zeigt. Die Aktion sollte stattfinden, wenn ich auf ein anderes Element klicke. Folgendes habe ich bisher geschrieben:

$('#column-left form').hide();
    $('.show-search').click(function() {
        $('#column-left form').stop(true, true).slideToggle(300);
        if( $('#column-left form').css('display') == 'none' ) {
            $("#offers").show();
        } else {
            $('#offers').hide();
        }
    });

Es versteckt das div, aber es kommt nicht zurück, wenn ich das Formular verstecke. Wird für jede Hilfe dankbar sein :)

bearbeiten:

Ok, ich habe es geschafft, den gewünschten Effekt zu erzielen, indem ich folgendes schreibe:

$('#column-left form').hide();
    $('.show-search').click(function() {
        if ($('#column-left form').is(":hidden")) {
            $('#column-left form').slideToggle(300);
            $('#offers').hide();
        } else {
            $('#column-left form').slideToggle(300);
            $("#offers").show();
        }
    });   

Ich weiß nicht, ob es richtig geschrieben ist, aber es funktioniert;) Danke an alle für die Hilfe!

46
Tomarz

Mit .is(':visible') können Sie testen, ob etwas sichtbar ist, und .is(':hidden'), um das Gegenteil zu testen:

$('#offers').toggle(!$('#column-left form').is(':visible')); // or:
$('#offers').toggle($('#column-left form').is(':hidden'));

Referenz:

119
ThiefMaster

Ja, Sie können .is(':visible') in Jquery verwenden. Während der Code unter dem Safari-Browser ausgeführt wird, funktioniert __..is(':visible') jedoch nicht. 

Verwenden Sie daher bitte den folgenden Code 

if( $(".example").offset().top > 0 )

Die obige Zeile funktioniert sowohl für IE als auch für Safari.

4
Baskar Madasamy

versuchen

if ($('#column-left form:visible').length > 0) { ...
2
kontur
 $('#column-left form').hide();
 $('.show-search').click(function() {
    $('#column-left form').stop(true, true).slideToggle(300); //this will slide but not hide that's why
    $('#column-left form').hide(); 
    if(!($('#column-left form').is(":visible"))) {
        $("#offers").show();
    } else {
        $('#offers').hide();
    }
  });
1
pravin

wenn sichtbar.

$("#Element").is(':visible');

wenn es versteckt ist.

$("#Element").is(':hidden');
0

Nach der Behebung eines Leistungsproblems im Zusammenhang mit der Verwendung von .is (": visible") würde ich gegen die obigen Antworten empfehlen und stattdessen mit dem Code von jQuery entscheiden, ob ein einzelnes Element sichtbar ist:

$.expr.filters.visible($("#singleElementID")[0]);

Dabei überprüft .is, ob sich eine Gruppe von Elementen in einer anderen Gruppe von Elementen befindet. Sie suchen also nach Ihrem Element innerhalb des gesamten Satzes sichtbarer Elemente auf Ihrer Seite. 100 Elemente zu haben ist ziemlich normal und es kann einige Millisekunden dauern, um das Array der sichtbaren Elemente zu durchsuchen. Wenn Sie eine Web-App erstellen, haben Sie wahrscheinlich Hunderte oder möglicherweise Tausende. Unsere App nahm manchmal 100 ms für $ ("# selector"). Is (": visible"), da geprüft wurde, ob sich ein Element in einem Array von 5000 anderen Elementen befand.

0
markdon