mootools - /ausblenden von div-abhängig von, ob oder nicht aktiviert ist

Lösung

Hier ist eine schnelle Lösung. Wenn Sie sind interessiert oder benötigen weitere Informationen darüber, wie dies funktioniert, Lesen Sie weiter!

$('toggle').addEvent('click', function(e){
    if(this.checked)) {
        $$('.toggle_slide').toggle();
    }
});

Veranstaltungen

In Mootools, alle Elemente haben die addEvent-Methode, die zwei Argumente nimmt. Das erste argument ist der Typ des Ereignisses (z.B. Mausklick) und die zweite ist eine Funktion, die aufgerufen werden, wenn das Ereignis Eintritt. Diese Funktion hat ein argument automatisch übergeben, die das Ereignis selbst. Daher erstellen Sie ein neues Ereignis in eine addEvent-Methode ist ein großer Fehler, da das neue Ereignis nicht das gleiche Ereignis wie das, was genannt wird die Methode addEvent Funktion. Sie können geben Sie den Namen des Standard-Ereignis-argument in der Funktion parameter-Liste und verwenden Sie es dann als normal. Also im code, e bereits vorhanden ist, wie das ist, was Sie genannt haben, die Veranstaltung in diesem Stück code: function(e){ und die ganze Linie e = new Event(e); tut, ist das überschreiben dieser parameter mit einem leeren Standard-event. Dies ist fast sicher nicht das, was Sie wollen.

Viele Aktionen auftreten, wenn Ereignisse geschehen, auch wenn JavaScript nicht vorhanden ist. Zum Beispiel, wenn ein Formular vorgelegt wird, das submit-Ereignis wird der browser angewiesen, die Daten erfassen, die für das Formular und senden Sie es an die action. Ein anderes Beispiel ist, wenn Sie auf einen link klicken, wird das click-Ereignis sagt dem browser, Folgen Sie diesem link. Diese sind bekannt als Standard-Ereignisse. Wenn wir jedoch zeigen die addEvent-Methode, sagen wir, einen link, wir wollen, dass unsere eigenen Aktionen auftreten, nicht der Standard-browser. Wir können verhindern, dass diese Standard-Aktionen aus, die durch die Verwendung der stop-Methode auf event-Objekte.

Da e für Ihr event-Objekt, - e.stop() wird verhindert, dass jeder Standard-Aktionen verhindern. Jedoch, in diesem Fall die Standard-Aktion für ein click-Ereignis auf ein Kontrollkästchen zu aktivieren oder deaktivieren Sie das Kontrollkästchen. e.stop() kann das verhindern (ich habe es noch nicht getestet), aber am besten tun Sie gar nichts. Daher wird es entweder verwirren Ihre Benutzer oder nichts tun, so schlage ich vor, Sie entfernen Sie es.

Schließlich in eine addEvent Funktion, die Sie verwenden können, die this Stichwort zu finden das element, dem das event zugeordnet ist.

Selektoren

Mootools hat eine sehr fortschrittliche selector system, mit dem Sie fast alles, was Sie wollen. Sie müssen wählen Sie Ihre fieldset, welches aus zwei Klassen. Jedoch die Auswahl, die Sie gewählt haben, $$('.toplined toggle_slide') sagt "Finde Elemente mit der Klasse toplined und dann innerhalb dieses Elements, die Elemente mit dem tag toggle_slide". Stattdessen sollten Sie verwenden $$('.toggle_slide')

Elemente

Können Sie erkennen, ob eine checkbox aktiviert ist mit der checked-Eigenschaft. Diese gibt true zurück, wenn eine checkbox aktiviert ist, andernfalls false. In Ihrem Fall, weil Sie die checkbox ist ein element, das Sie hinzufügen, die Veranstaltung zu verwenden, können Sie this.checked um zu bestimmen, ob oder nicht, es wird überprüft.

Tipp: Wenn Sie mit Firebug, kann man Sie benutzen die Konsole.Protokoll drucken in der Konsole ein beliebiges element. Dies zeigt alle Eigenschaften und Methoden besaß, indem das element an diesem Punkt in der Zeit. Dies wird Ihnen zeigen Sachen wie überprüft, ziemlich schnell.

Darüber hinaus Mootools ist in zwei Komponenten aufgeteilt, Mootools-core und Mootools mehr. Die toggle-Methode ist nur definiert Elemente, wenn Sie Element.Verknüpfungen von Mootools mehr, oder wenn Sie haben geschrieben, dass die Methode selbst. Andernfalls erhalten Sie eine Fehlermeldung.