Problem mit jQuery, Bootstrap-JS und eigenem JS-Script

Chaos234 · 13. Februar 2015

leider muss ich dir widersprechen, wenn du denkst, dass ich jedes mal einen Handler o. ä. benötige.
Hier mal einen Ausschnitt aus dem JS:

JavaScript

/******Stammesgemeinschaft******/
                $("#option1").click(function() {
                    if(opt2 === false) {
                        $("#block-1-1").css("background-color", "yellow");
                        $("#ressources").fadeIn("slow").html("<div><h2>Benötigt:</h2></div>");
                        opt1 = true;
                    } else {
                        $("#ressources").fadeIn("slow").html("<div><h2>Benötigt</h2><p><strong style='color: red'>Du hast diese Forschung bereits erforscht!</strong></p></div>");
                    }
                });


                $("#option2").click(function() {
                    if(opt1 === true) {
                        if(opt2 === false) {
                            $("#block-1-1").css("background-color", "green");
                            $("#ressources").fadeOut("slow");
                            opt2 = true;
                        } else {
                            $("#ressources").fadeIn("slow").html("<div><h2>Benötigt</h2><p><strong style='color: red'>Du hast diese Forschung bereits erforscht!</strong></p></div>");
                        }
                    } else {
                        $("#ressources").fadeIn("slow").html("<div><h2>Benötigt</h2><p><strong style='color: red'>Du musst erst Stammesgemeinschaft als aktive Forschung auswählen!</strong></p></div>");
                    }
                });
            /******Stammesgemeinschaft******/

Alles anzeigen

Und das folgende wäre das längste:

JavaScript

/******Steinschleudern******/
                $("#option11").click(function() {

                    if(opt8 === true && opt6 === true) {
                        if(opt12 === false) {
                            $("#block-3-2").css("background-color", "yellow");
                            $("#ressources").fadeIn("slow").html("<div class='col-md-2' style=''><h2>Benötigt:</h2></div>");
                            opt11 = true;
                        } else {
                            $("#ressources").fadeIn("slow").html("<div class='col-md-12' style='border: 0px solid'><h2>Benötigt</h2><p><strong style='color: red'>Du hast diese Forschung bereits erforscht!</strong></p></div>");
                        }
                    } else {
                        if(opt8 === false && opt6 === true) {
                            $("#ressources").fadeIn("slow").html("<div class='col-md-12' style='border: 0px solid'><h2>Benötigt</h2><p><strong style='color: red'>Du musst noch Töpferei erforschen!<br><br>Dafür benötigst Du 3 Forge Punkte!</strong></p></div>");
                            $("#ressources").fadeIn("slow").append("<div class='col-md-12' style='border: 0px solid'><h2>Vorhanden</h2><p><strong style='color: green'>Du hast Speere erforscht!</strong></p></div>");
                        }
                        if(opt8 === true && opt6 === false) {
                            $("#ressources").fadeIn("slow").html("<div class='col-md-12' style='border: 0px solid'><h2>Benötigt</h2><p><strong style='color: red'>Du musst noch Speere erforschen!<br><br>Dafür benötigst Du 3 Forge Punkte!</strong></p></div>");
                            $("#ressources").fadeIn("slow").append("<div class='col-md-12' style='border: 0px solid'><h2>Vorhanden</h2><p><strong style='color: green'>Du hast Pfahlbauten erforscht!</strong></p></div>");
                        }
                        if (opt8 === false && opt6 === false) {
                           $("#ressources").fadeIn("slow").html("<div class='col-md-12' style='border: 0px solid'><h2>Benötigt</h2><p><strong style='color: red'>Du musst erst Töpferei erforscht haben!<br><br>Dafür benötigst Du 3 Forge Punkte!</strong></p></div>");
                           $("#ressources").fadeIn("slow").append("<div class='col-md-12' style='border: 0px solid'><h2>Benötigt</h2><p><strong style='color: red'>Du musst erst Speere erforscht haben!<br><br>Dafür benötigst Du 3 Forge Punkte!</strong></p></div>");
                        }
                    }
                });

                $("#option12").click(function() {

                    if(opt9 === true) {
                        if(opt12 === false) {
                            $("#block-3-2").css("background-color", "green");
                            $("#ressources").fadeOut("slow");
                            opt12 = true;
                        } else {
                            $("#ressources").fadeIn("slow").html("<div><h2>Benötigt</h2><p><strong style='color: red'>Du hast diese Forschung bereits erforscht!</strong></p></div>");
                        }
                    } else {
                        if(opt8 === true && opt6 === true && opt11 === false) {
                            $("#ressources").fadeIn("slow").html("<div><h2>Benötigt</h2><p><strong style='color: red'>Du musst erst Konstruktion als aktive Forschung auswählen!</strong></p></div>");
                        } else {
                            if(opt8 === true && opt6 === false && opt11 === false) {
                                $("#ressources").fadeIn("slow").html("<div><h2>Benötigt</h2><p><strong style='color: red'>Du musst noch Speere erforschen!<br><br>Dafür benötigst Du 3 Forge Punkte!</strong></p></div>");
                                $("#ressources").fadeIn("slow").append("<div><h2>Benötigt</h2><p><strong style='color: red'>Du musst erst Konstruktion als aktive Forschung auswählen!</strong></p></div>");
                                $("#ressources").fadeIn("slow").append("<div><h2>Vorhanden</h2><p><strong style='color: green'>Du hast Töpferei erforscht!</strong></p></div>");
                            }
                            if(opt8 === false && opt6 === true && opt11 === false) {
                                $("#ressources").fadeIn("slow").html("<div><h2>Benötigt</h2><p><strong style='color: red'>Du musst noch Töpferei erforschen!<br><br>Dafür benötigst Du 3 Forge Punkte!</strong></p></div>");
                                $("#ressources").fadeIn("slow").append("<div><h2>Benötigt</h2><p><strong style='color: red'>Du musst erst Konstruktion als aktive Forschung auswählen!</strong></p></div>");
                                $("#ressources").fadeIn("slow").append("<div><h2>Vorhanden</h2><p><strong style='color: green'>Du hast Speer erforscht!</strong></p></div>");
                            }
                            if(opt8 === false && opt6 === false && opt11 === false) {
                                $("#ressources").fadeIn("slow").html("<div><h2>Benötigt</h2><p><strong style='color: red'>Du musst erst Töpferei erforscht haben!<br><br>Dafür benötigst Du 3 Forge Punkte!</strong></p></div>");
                                $("#ressources").fadeIn("slow").append("<div><h2>Benötigt</h2><p><strong style='color: red'>Du musst erst Speere erforscht haben!<br><br>Dafür benötigst Du 3 Forge Punkte!</strong></p></div>");
                                $("#ressources").fadeIn("slow").append("<div><h2>Benötigt</h2><p><strong style='color: red'>Du musst erst Konstruktion als aktive Forschung auswählen!</strong></p></div>");
                            }
                        }
                    }
                });
            /******Steinschleudern******/

Alles anzeigen

Es ist nehmlich kein Select, sondern eher der Click-Function zuzuordnen. Es gibt nicht einmal eine onClick Abfrage. Den Code dazu kann man sich sehr leicht aus dem Quellcode nehmen ^^.

Wird also schwer werden, dein Script, an meine Variation anzupassen, da ich nach den IDs gehe und das sind am ende so um die +400 (je zwei buttons, also so ca. +200 forschungen, wenn ich mich nicht irre).

Klar, man kommt schnell durcheinander und hat dan einen Fehler drinn, der kann aber auch schnell ausgebügelt werden, denn normalerweise habe ich für den ersten Button immer die ungeraden Optionen und für den zweiten die geraden Optionen und es geht immer von rechts nach links :).

Irgendwann wird sich bestimmt eine bessere Methode finden, aber bis dahin muss das so ersteinmal ausreichen ;).

Netzwerg · 16. Februar 2015

Das ist genau das, was ich meine. Dein JS wird sehr groß und ist fehleranfällig, hat eine riesen Anteil an C&P und wird ein Maintenance-Alptraum. Und im übrigen registrierst du in deinem Quellcode genau wie ich gesagt habe jedes mal einen neuen Handler. $("#option1").click(function() { ... }); ist der erste, $("#option2").click(function() { ... }); der zweite, und mit $("#option11").click(function() { ... }); und entsprechend dem für option12 geht es weiter. Alleine das sind 4 unterschiedliche, jedes mal hard-gecodete Handler.

Ich hab ja auch nicht gesagt, du sollst 1:1 meine Lösung verwenden, sondern dir ein Beispiel gegeben, wie man es generischer lösen könnte. Du denkst einfach stur prozedural und in primitiven Datentypen. Denk objektorientiert und imperativ!

Man könnte z.B. eine Technologie als ein Objekt auffassen. Eine Technologie hat einen Namen, hat Voraussetzungen, die erfüllt sein müssen (also eine Liste an anderen Technologien) und hat dann ggf. noch eine Eigenschaft, ob sie erforscht ist (boolean).

Man kann dann auf zwei Arten weitermachen: Diese Daten in data-* Attributen speichern und das Markup selber schreiben, und das JS die Daten aus den data-* Attributen lesen lassen. Oder man speichert sich diese Daten im JSON-Format ab und lässt sich das Markup gleich vom JS generieren.

Ein anderer Punkt sind deine ganzen kopierten Strings. Man könnte diese Strings einmal generisch fertig machen, z.B. als var x = "Glückwunsch, du hast {0} erforscht" und dann x.replace("[0}", "Speere") um das ganze auszugeben. Das ist eine triviale Änderung, spart die aber viel C&P und erlaubt die a) das Ganze viele infacher zu übersetzen oder b) die Nachricht viel einfacher anzupassen.

Hier ist mal ein anderes Beispiel:
http://jsbin.com/heludibewu/2 (Link zur Source: http://jsbin.com/heludibewu/2/edit).

Wenn du bei einer Technologie den "erforschen" Button drückst, wird entsprechend es bei den Voraussetzungen grün markiert. Du kannst hier natürlich noch beliebige weitere Aktionen machen, wie Nachrichten einblenden oder noch andere Färbungen vornehmen.

Bei dieser Lösung kannst du neue Technologien hinzufügen, indem du einfach das technologies-Array um neue Objekte erweiterst. Das ist eine Möglichkeit, ganz klassisch das open/closed Principle anzuwenden.

Deine Lösung funktioniert natürlich auch, keine Frage. Sie ist nur - nach allen objektiven Kriterien (s.o.)- sehr schlecht. Es ist typischer Code wie man ihn höchstens von einem gerade anfangendem Schler erwarten würde. Erreicht sein ziel, aber wenn du ihn jemals jemandem anderen gibst bringt der dich dafür um

Meine Lösung ist übrigens keineswegs kanonisch oder das Gelbe vom Ei - sie ist nur eine der vielen Möglichkeiten, sich dem Problem generisch zu nähern, C&P zu vermeiden und den Wartungsaufwand zu verringern. Meine Lösung erlaubt es auch, die Daten ggf. automatisch auszulesen, und sich somit komplett zu sparen, diese manuell einzugeben (was bei 400 Technologien auch viel sein dürfte). Selbst wenn man es manuell eingeben muss spart man sich viel Zeit, da man nur Elemente ins Array packen muss, und sich sonst keine Gedanken mehr machen muss.

tl;dr: Man kann sich viel Arbeit sparen, wenn man Anfangs richtig arbeitet. Objektorientierung hilft

Problem mit jQuery, Bootstrap-JS und eigenem JS-Script

Ähnliche Themen

Osterei Suchspiel?

HSV Uhr Script ?

cls-design

Informationen

Demoinstallationen

Hilfe