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