Attach listener an mehrere Kinder-Elemente
Ich versuche, um loszuwerden, jquery von meiner Seite und umschreiben einige Funktionalitäten der reinen js.
Es gibt 2 Listen mit der Klasse arbeiten, mit einigen li-Elemente. Jedes li-element sollte eine Aktion auf klicken Sie auf hinzufügen-Klasse 'active' zu. In jquery ist sehr einfach:
$('.work li').on('click', function () {
var that = $(this);
that.parent().find('li.active').removeClass('active');
$(this).addClass('active');
})
Gibt es eine schönere Lösung in reinem js anstatt etwas wie dies mit verschachtelten Schleifen:
var lists = document.getElementsByClassName('work');
for(var i=0; i<lists.length; i++){
var children = lists[i].querySelectorAll('li');
for(var j=0; j<children.length;j++){
children[j].addEventListener();
}
}
- Nun sehen Sie, warum JQuery entwickelt wurde und so populär geworden ist.
- Jetzt sehe ich, wie viel weiß ich nicht über js
- Sie arbeiten direkt mit dem DOM ist mühsam und erfordert eine Menge der Suche Schleifen wie diese. Beachten Sie auch, dass es einige Unterschiede zwischen den Browsern für das Verfahren-Namen und-Funktionen. Sie waren die zwei Probleme, die das jQuery-set heraus zu lösen, zunächst. Warum sind Sie versuchen, Sie zu beseitigen?
- Warum würden Sie NICHT verwenden, jQuery, wenn Sie spielen, um mit dem DOM?
- Da jQuery behandelt den DOM als ein gigantischer, veränderlichen, globalen Objekt in der Mitte Ihrer Anwendung? Übrigens, @jalynn2, was sind die Unterschiede zwischen den Browsern für Methodennamen?
- Meine Seite hat einige threejs in es und derzeit jquery verwendet, die nur für diesen Zweck (ich habe neu geschrieben, alle anderen Funktionalitäten der reinen js, und Sie funktionieren). Ich denke, es hat keinen Sinn, halten eine separate Bibliothek, die nur zuordnen können, onclick-Listener in einem bequemen Weg + ich will etwas neues zu lernen 😉
- das ist in Ordnung, Sie sind auf dem richtigen Weg und es gibt keinen Weg, um die Schleife. Wenn Sie tun eine Menge, können Sie beginnen, umgestalten, es in gemeinsame Funktionen, aber dann Sie beginnen zu erfinden, jQuery 🙂
- jQuery ist nicht riesig - es geht um 29kb gzipped. Im ernst, 29kb stört Sie genug, um Sie wollen, schreiben Sie Schleifen so?
- Wenn es dich stört, dass viel, können Sie immer eine benutzerdefinierte build - github.com/jquery/jquery#how-to-build-your-own-jquery - jQuery-nur gehört die DOM-API und entfernen Sie alles andere.
- der DOM IST ein gigantischer, veränderlichen, globalen Objekt in der Mitte der Anwendung. Sie können craft-code, um access in einer kontrollierten Art und Weise, aber es ist keine änderung dieser Tatsache. Ich erinnere mich nicht, Unterschiede aus der Spitze von meinem Kopf, außer mit der AJAX-Objekte, aber Sie sind da draußen. Ich habe mit jQuery zu lang und Sie haben verblasst aus dem Speicher.
- Ich denke, die OP hat definitiv den richtigen Weg-Runde hier. Wenn Ihr mit einem komplizierten Bibliothek für eine einzelne Funktion, die ist leicht erreichbar in Vanille dann Ihren macht etwas falsch. Wenn Sie hatte einen größeren Bedarf, wie UI-Elemente oder AJAX so gut, dann würde ich sagen, stick mit jQuery.
- jquery kann verschwinden
InformationsquelleAutor mjanisz1 | 2014-12-23
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Könnte man schaffen, dass die gesamte Funktionalität durch hinzufügen eines Ereignis-Listeners für alle
li
s zurückgegeben von derquerySelectorAll
. DiequerySelectorAll
gibt eine nodeList und nicht ein array, so müssen, um eine Karte zu, um es Durchlaufen. Beachten Sie jedoch, dass wir immer noch Durchlaufen der Satz.Beispiel-Snippet:
JS:
CSS:
HTML:
In der Tat konnte man auch mit event-delegation und fügen Sie Ereignis-listener nur auf die
ul
und verwenden Sie dann dieevent.target
um Ihre routine. Das ist besser als das hinzufügen eines Ereignis-Listeners zu jederli
im Falle es gibt viele von Ihnen. Es werden nur so viele Handlerul
s.Nicht wirklich. Haben Sie zur Iteration über die Elemente sowieso. Schöner im Sinne von jazzigen, ja. Schöner in Bezug auf die Vermeidung der Schleifen, Nein. Schöner in Bezug auf die Effizienz, ja. Vergleichen Sie die oben-vanilla-javascript-code mit jQuery ein, die in Ihrer Frage:
.
Könnte man tatsächlich Anhängen klicken Sie auf Ereignis-listener auf dem wrapper-element und filter aus geklickt
li
element mitevent.target
(oder für IEevent.srcElement
).Ausprobieren unter snippet (nicht für die Produktion von code, es sollte verbessert werden, vor allem für browser-Kompatibilität). Gute Seite dieser Lösung ist, dass Sie nicht haben, um für die Uhr neue Elemente dynamisch Hinzugefügt wrapper-element...
JS:
HTML:
Sicher. Warum nicht einfach besser nutzen
document.querySelectorAll
? Es tut verwenden Sie die syntax von css, so können wir packen beides in einem gehen.Vielleicht so etwas wie dieses:
querySelectorAll() ist sehr leistungsfähiges Werkzeug.
Habe ich eine JSFiddle für Sie.
Code kann immer noch genug schöne und gut lesbar:
Andere Möglichkeit ist (wenn Sie immer noch wollen, zu iterieren mit forEach):
Hier (JSFiddle) wir sind interating durch eine NodeList zurückgegeben
querySelectorAll(".work li")
durch aufrufen die Array.der Prototyp.forEach - Methode auf.Und hier (Jsfiddle) ist das vollständige Beispiel, schaltet der Klasse:
Und schließlich sollte es nur ein aktives element zu einem Zeitpunkt (Jsfiddle):
querySelectorAll()
gibt ein Objekt zurück, NodeList Hexe kann nicht behandelt werden, genau als Array.Leute beschweren sich über die wordiness mit nativen DOM-Methoden, aber es gibt kein problem, ein paar bits von strategisch Platzierten Zucker konnte nicht helfen. Beginnen Sie, indem Sie schreiben, wie Sie möchten:
Nun müssen Sie nur noch schreiben
eachClass
,eachSelector
,eachChild
,parent
, undon
, etwas wie das folgende. Sie werden jeweils über 2-3 Zeilen. Sie müssen nur schreiben Sie Sie einmal, und voila, Sie haben Ihre eigene kleine Bibliothek.Was ist
active
? Es ist ein kleines Objekt, das wir erstellen können, die für das setzen und entfernen einer bestimmten Klasse:Und so weiter. Große Programmierer sind ständig kleine Rahmen und Ebenen und utilities und mini-Sprachen. Das macht Ihren code kompakt, lesbar, weniger buggy und einfacher zu schreiben.