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 ?
Antworten
Zu viele Anzeigen?
Peter Wone
Punkte
16529
Um fair zu sein, die Frage ist älter als こん Antwort.
Ich füge dies nicht hinzu, um den Auftraggeber zu kritisieren, sondern um allen zu helfen, die sich diese Frage noch stellen.
Der richtige Weg, um festzustellen, ob etwas sichtbar ist, ist die Konsultation des View-Modells;
Wenn Sie nicht wissen, was das bedeutet, dann werden Sie sich auf eine Entdeckungsreise begeben, die Ihnen die Arbeit sehr erleichtern wird.
Hier ist ein Überblick über die modell-ansicht-ansicht-modell Architektur (MVVM).
KnockoutJS ist eine Bindungsbibliothek, mit der Sie diese Dinge ausprobieren können, ohne ein ganzes Framework lernen zu müssen.
Und hier ist etwas JavaScript-Code und ein DIV, das sichtbar sein kann oder auch nicht.
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script>
var vm = {
IsDivVisible: ko.observable(true);
}
vm.toggle = function(data, event) {
// Get current visibility state for the div
var x = IsDivVisible();
// Set it to the opposite
IsDivVisible(!x);
}
ko.applyBinding(vm);
</script>
<div data-bind="visible: IsDivVisible">Peekaboo!</div>
<button data-bind="click: toggle">Toggle the div's visibility</button>
</body>
</html>Beachten Sie, dass die Toggle-Funktion nicht das DOM konsultiert, um die Sichtbarkeit des div zu bestimmen, sondern das view-model.
Nicht registrierter Benutzer
Punkte
0
Disapamok
Punkte
1337
Sie können eine CSS-Klasse verwenden, wenn sie sichtbar oder verborgen ist, indem Sie die Klasse umschalten:
.show{ display :block; }Setzen Sie Ihr jQuery toggleClass() ou addClass() ou removeClass(); .
Ein Beispiel,
jQuery('#myID').toggleClass('show')
Der obige Code fügt Folgendes hinzu show css-Klasse, wenn das Element nicht über show und wird entfernt, wenn sie show Klasse.
Und wenn Sie überprüfen, ob es sichtbar ist oder nicht, können Sie diesen jQuery-Code folgen,
jQuery('#myID').hasClass('show');
Der obige Code gibt einen booleschen Wert (true) zurück, wenn #myID Element hat unsere Klasse ( show ) und false, wenn sie nicht die ( show ) Klasse.
cbertelegni
Punkte
422
Ankush Kumar
Punkte
689
Der folgende Code prüft, ob ein Element in jQuery versteckt oder sichtbar ist
// You can also do this...
$("button").click(function(){
// show hide paragraph on button click
$("p").toggle("slow", function(){
// check paragraph once toggle effect is completed
if($("p").is(":visible")){
alert("The paragraph is visible.");
} else{
alert("The paragraph is hidden.");
}
});
});
68 Stimmen
Es ist erwähnenswert (auch nach all dieser Zeit), dass
$(element).is(":visible")funktioniert für jQuery 1.4.4, aber nicht für jQuery 1.3.2, unter Internet Explorer 8 . Dies kann getestet werden mit Tsvetomir Tsonevs hilfreiches Test-Snippet . Denken Sie einfach daran, die Version von jQuery zu ändern, um unter jedem zu testen.5 Stimmen
Dies ist eine verwandte, wenn auch andere Frage: stackoverflow.com/questions/17425543/
2 Stimmen
Wenn Sie nicht an der virtuellen Ausblendung von CSS-Elementen interessiert sind, sondern an der physischen Sichtbarkeit im "Viewport-Bereich" für den Benutzer, dann sollten Sie sich Folgendes ansehen stackoverflow.com/questions/487073/ y stackoverflow.com/questions/123999/