Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] jQuery/Javascript Code vereinfachen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] jQuery/Javascript Code vereinfachen

    Guten Abend,

    ich habe hier folgenden Code geschrieben den ich gerne vereinfachen möchte, aber leider weiß ich nicht wie.

    Code:
                    $('#content-box').on('DOMSubtreeModified', function(){
                        $("input:text").each(function() {
                            var value = $(this).val();
                            $(this).focusin(function() {
                                if($(this).val()===value){
                                    $(this).val('');
                                    $(this).css('color', '#333');
                                }
                            });
                            $(this).focusout(function() {
                                if($(this).val().length < 1){
                                    $(this).css('color', 'rgba(0,0,0,0.5)');
                                    $(this).val(value);
                                } else {
                                    $(this).css('color', '#333');
                                }
                            });
                        });
                    });
    Der Code sucht die input[text] Felder aus der "#content-box". Der Inhalt in der "#content-box" ist dynamisch. Wenn er die Felder gefunden hat wird der vorgebene Value in einer Variable gespeichert. Wenn man nun in das Feld klickt wird der Value auf null gesetzt. Wenn man dann was eingibt bleibt der Value natürlich der den man gerade eingeben hat. Wenn man aber den Inhalt wieder löscht, weil man sich zum Beispiel vertan hat, dann wird wieder der vorher vorgebene Wert eingesetzt.

    Hauptsächlich stört mich die erste Zeile da die ja doch nicht so schön ist und wie ich gelesen habe auch nicht sehr Ressourcen schonend. Ich habe schon alles mit "on" "load" und "ready" versucht. Wie ich nun gelesen habe kann es mit "load" und "ready" nicht funktionieren. Nur wie klappt es dann mit on? Ich muss ja irgendein event eingeben, doch ich finde nicht welches.

    Ich bedanke mich schon mal im Voraus und bin dankbar für jede konstruktive Antwort.

  • #2
    Das Zauberwort lautet event delegation.
    [COLOR="#F5F5FF"]--[/COLOR]
    [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
    „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
    [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
    [COLOR="#F5F5FF"]
    --[/COLOR]

    Kommentar


    • #3
      Ist Delegation nicht veraltet? Kannst mir das genauer erklären? Danke schon mal.

      Kommentar


      • #4
        Nein ist es nicht. Infos findest Du im Netz.
        [COLOR="#F5F5FF"]--[/COLOR]
        [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
        [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
        [COLOR="#F5F5FF"]
        --[/COLOR]

        Kommentar


        • #5
          Gut ich werd mal schauen.

          Kommentar


          • #6
            Hallöchen,

            Zitat von oelgemeyer Beitrag anzeigen
            ich habe hier folgenden Code geschrieben den ich gerne vereinfachen möchte, aber leider weiß ich nicht wie.
            Um die Erwartungshaltung mancher Nutzer hier nicht zu enttäuschen: dann nutze AngularJS

            Viele Grüße,
            lotti
            [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

            Kommentar


            • #7
              @lottikarotti: Nein danke, keine weiteren Sprachen mehr. Ich tu mich so schon schwer. Ich werde es mir mal angucken aber ich denke ich bleibe bei jQuery.

              @nikosch: ich habe mir delegate mal angeschaut und so wie es aussieht ist es das gleiche wie on. damit komme ich jetzt gerade nicht weiter. Wenn ich die beiden zeilen $(this).focusin und $(this).focusout in $(document).on("focusin", "input:text" function () {... und so weiter ändern würde und die erste Zeile löschen würde, würde es zwar funktionieren das der Value der Inputs gelöscht wird, aber er kann nicht wieder hergestellt werden sobald man den selbst eingegebenen Inhalt löscht, da die Variable die in der zweiten Zeile geschrieben wird nicht existiert. Ich hoffe Du verstehst wie ich das meine.

              Kommentar


              • #8
                Bzgl AngularJS: Ich würde es mir zumindest mal ansehen. Ist auch nicht so unzugänglich wie jQuery (besonders später im Betreib).

                Kommentar


                • #9
                  Wie gesagt ich schau es mir mal an. Wieso erfahre ich von sowas erst dann was wenn ich schon alles mit jQuery geschrieben habe. Dann kann ich nochmal alles umschreiben. Und ich muss auch noch alles in mysqli umschreiben weil ich leider zulange von der ganzen Materie weg war und gar nicht mitbekommen habe, das beschlossen wurde das mysql jetzt doof ist. Blöd sowas. Aber trotzdem würde ich gerne mein Problem erst beheben.

                  Kommentar


                  • #10
                    AngularJS ist keine Sprache, sondern ein Framework für JavaScript, das dir bei doch ne Menge Zeugs abnimmt und noch dazu (@rkr, ich habs mir jetzt auch mal angesehen ) vom Konzept und Aufbau richtig awesome ist.
                    https://github.com/Ma27
                    Javascript Logic is funny:
                    [] + [] => "", [] + {} => object, {} + [] => 0, {} + {} => NaN

                    Kommentar


                    • #11
                      Ja wie auch immer. ^^ weiß wohl das es keine Sprache ist. Genauso wenig wie mysqli. Aber du weißt doch was ich meine oder? Immer diese Wortklauberei.

                      Kommentar


                      • #12
                        mir gings grad nicht ums klugscheißen, ich wollte eigentlich nnur klarstellen, dass Angular keine "neuartige" Sprache ist (ich weiß, wie schwer es ist, eine Sprache zu lernen), sondern ein ziemlich cooles JS Framework, das dir ne Menge Arbeit abnehmen kann
                        https://github.com/Ma27
                        Javascript Logic is funny:
                        [] + [] => "", [] + {} => object, {} + [] => 0, {} + {} => NaN

                        Kommentar


                        • #13
                          Okay. Das blöde daran ist, ist das ich ja schon alles in jQuery habe und wenn ich mich nun für AngularJS entscheide möchte ich auch alles in Ang..JS haben. Ich würde ungern jQuery, AngularJS und noch mehr Frameworks laden. Dann hat der Client später ne lahme Seite mit 20 Frameworks weil ich zu faul war alles umzuschreiben. Also darf ich mal nicht faul sein und alles umschreiben. Yeah.

                          Kommentar


                          • #14
                            also ich nutze aktuell beides
                            jQuery für Bootstrap oder Foundation und AngularJS.

                            Puh jQuery und Angular sind zwei ziemlich gut genutze und ausgereifter Frameworks, da kann ich mir Performance Probleme ehrlich gesagt nicht vorstellen

                            Was du eventuell vermeiden solltest ist Twig/irgendeine PHP Templating Engine neben AngularJS zu nutzen, wenn das Template dann wird das imo sehr schnell unübersichtlich.

                            Ich versuche inzwischen, die Templates nur mit Angular laufen zu lassen und PHP wird dann mehr oder weniger zu einem Webservice (hier ein Blogpost dazu: http://blog.mayflower.de/4501-Symfon...AngularJS.html)
                            https://github.com/Ma27
                            Javascript Logic is funny:
                            [] + [] => "", [] + {} => object, {} + [] => 0, {} + {} => NaN

                            Kommentar


                            • #15
                              Naja bei zwei wird das kein Problem werden wie du sagt. Ich meine das so. Ich bin relativ langsam (leider) und verpasse die ganzen tollen neuen Frameworks und Functionen ständig. Wenn ich jetzt mit AngularJS anfange und dann später ein weiteres FW benutze und dann vielleicht noch eins, weil ich halt so langsam bin dann hab ich später vier oder fünf FW's im Einsatz. Was das finden von einem Fehler nicht gerade leicht macht.

                              Templating (Ehrlich gesagt weiß ich auch nicht was das ist.) Mache ich nicht. Also bisher kein Problem. ^^

                              Aber bitte zurück zu meinem Problem.

                              Kommentar

                              Lädt...
                              X