[JQUERY] Anfängerprobleme: Codezeilen erläuterung!

M

Mugen

New member
Hi Leute,
Hoffe das Thema passt hier halbwegs hin. SuFu hab ich leider nichts gefunden und auch wenn es sicher sehr banale Fragen sind, komm ich alleine nicht weiter.... google youtube alles nichts genützt :(

Konkret habe ich verschiedene Zeilen Code, die ich gerne verstehen und nachvollziehen würde, ich aber beim besten Willen nicht drauf komme, was die Intention dahinter ist/war. Sobald ich was verstanden habe, kommen dann die nächsten xD

Code: 
$.each(Pizza, function(i){
                    $('#dropdown').append(new Option(Pizza[i].name, i, true, true));
                    });

kurze Erklärung:
"Pizza" ist ein array aus JSON objekten (also zb Hawai ist ein Objekt aus dem Array).
#dropdown ist die ID von nem <select></select>
und ich will jetzt die ganzen verschiedenen Pizzen als option in dem select drin haben.

So, und jetzt mal wie ich den Code verstehe:

1.Zeile:
mit "$.each" rufe ich die each-function aus jquery auf, die letztlich über mein array "pizza" iteriert und bei jedem Objekt die Funktion "function(i)" ausführt. [Warum brauche ich hier ein "i"?]

2. Zeile:
Da ich meine Pizzen in das select Menü bringen will, wähle ich es mit "$('#dropdown') aus.
".append()" ist eine Funktion um das letzte Element hinzu zu fügen. Innerhalb der append Funktion muss ich angeben, was hinzugefügt wird, nämlich eine neue Auswahlmöglichkeit. das geschieht mittels "new Option()".
Und jetzt beginnt mein Problem:
Was sind das alles für Angaben innerhalb der Klammern von "new Option"?
"Pizza.name" ist offensichtlich der Name des Objektes an der i-ten Stelle des Pizza-Arrays (name ist jeweils ein key in den einzelnen JSON Objekten). Aber was soll da bitte dann "i" und "true" "true"?
wenn ich in html ein <select>-dings mache, brauch ich bei den Optionen auch nie soviele Werte dazu?

Wäre echt dankbar für ein bisschen Hilfe :)
 
Erstmal vielen Dank für deine Antwort! Leider hab ich überhaupt keine Ahnung wo ich die Option-parameter sehen kann :/ kann also nur rätseln was es mit den "i" und den "true" "true" auf sich hat...
Hier mal der gesamte Code.

Code: 
<html>
    <head>
        <title>Pizzabestellung</title>
    <meta charset="utf-8">
        
        <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
        <script type="text/javascript" src="js/jquery.form.js"></script>
        <script type="text/javascript" src="js/jquery.validate.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        </head>
    
    <body>
            
        <div>
            <h1>Mhhhh, Pizza! Ihre Bestellung:</h1>
            <select id="dropdown"></select>
           
    <button id="Bestellen">Bestellen</button>
        
    
    </div>
        
        <script>
        
               
                var hawaii = {
                    name : "Hawaii",
                    zutaten : ["Schinken, Ananas"]
                    };
                var roma = {
                    name : "Roma",
                    zutaten : ["Salami", "Schinken", "Zwiebeln", "Pilze"]
                    };
                var margherita = {
                    name : "Margherita",
                    zutaten : ["Käse", "Tomatensoße"]
                    };
                var vegetarisch = {
                    name : "Vegetarisch",
                    zutaten : ["Pilze", "Paprika", "Oliven", "Zwiebeln"]
                    };
                var döner = {
                    name : "Döner",
                    zutaten : ["Dönerfleisch", "Zwiebeln", "Knoblauchsoße"]
                    };

                var Pizza = [hawaii, roma, margherita, vegetarisch, döner];

                $.each(Pizza, function(i){
                    $('#dropdown').append(new Option(Pizza[i].name, i, true, true));
                    });
                
            
                $('#Bestellen').click(function(){
                    $_Pizza = $('#dropdown').val();
                    $_zutaten = Pizza[$_Pizza].zutaten.length;
                    $_Preis = 3 + $_zutaten * 0.5;
                    alert("Pizza: " + Pizza[$_Pizza].name +"\n"+ "Zutaten: "+ Pizza[$_Pizza].zutaten + "\n" + "Preis: " + $_Preis + " Euro");
                });
             </script>
    </body>



</html>

Vielleicht sieht ja einer woher die Parameter kommen :D
 
Mugen schrieb:
Vielleicht sieht ja einer woher die Parameter kommen :D
Zum Vergrößern anklicken....
woher sie kommen kann ich dir sagen, die frage ist aber wohin sie gehen.
ich vermute mal das hier:
Code: 
<script type="text/javascript" src="js/jquery.form.js"></script>
sonst musst du mal weitersuchen woher das option-objekt kommt


du hast 2 mal jquery eingebunden
Mugen schrieb:
Code: 
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
...
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet von einem Moderator:
ja, hatte es 2mal drin, weil ich jquery nicht auf dem Rechner hab, deswegen
" <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">"
damits funktioniert!

Hab folgende Zeilen jetzt einfach mal gelöscht, weil die Dateien sowieso nicht vorhanden sind.
(der code ist die Musterlösung zu einer Übungsaufgabe und ich hab nur die html-Datei, sonst nichts.)
Code: 
        <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
        <script type="text/javascript" src="js/jquery.form.js"></script>
        <script type="text/javascript" src="js/jquery.validate.js"></script>

Also können die parameter ja nicht von "js/jquery.form.js" kommen, wenn die Datei gar nicht vorhanden bzw nicht mehr implementiert ist und es trotzdem noch fehlerfrei im Browser angezeigt wird, oder?

ok, hab jetzt die beiden "true"- parameter einfach mal gelöscht und anscheinend waren die nur zur Zierde da, läuft einwandfrei ohne "true" --> dieses Problem wäre also gelöst! :D

Jetzt bleibt nur noch das "i"

Code: 
$.each(Pizza, function(i){
                    $('#dropdown').append(new Option(Pizza[i].name, i));
                    });

" function(i)":
kann es hier einfach nur für "index" stehen? wäre das möglich? Wenn ich es aus der Funktion raus nehme, dann werden die Elemente nicht ins dropdown-Menü übernommen und es bleibt leer.

$('#dropdown').append(new Option(Pizza.name, i)); :
Das erste "i" ist ja der index im array, was ist mit dem 2.? Wenn ich es weglasse, wird das alert(); später nicht ausgeführt, das dropdown-menu bleibt davon unberührt und die Pizzen werden trotzdem übernommen.
Kann es also sein, dass:
ich dem dropdown ja nicht nur den Namen übermitteln bzw geben will, sondern auch irgendwie den Inhalt? nur bräuchte ich da irgendwie ne Erklärung wie das "function(i)" dann mit "(new Option(Pizza.name, i)" dieser Zeile zusammenhängt, damit ich es auch wirklich verstehe.
 
Mugen schrieb:
Hab folgende Zeilen jetzt einfach mal gelöscht, weil die Dateien sowieso nicht vorhanden sind.
(der code ist die Musterlösung zu einer Übungsaufgabe und ich hab nur die html-Datei, sonst nichts.)
Zum Vergrößern anklicken....
scheint tatsächlich bei einigen browsern ein buildin objekt zu sein, vermutlich weil der ie das mal so hatte

https://msdn.microsoft.com/en-us/library/dd757810(v=vs.85).aspx

aber das scheint nicht standard zu sein, also vorsicht

Mugen schrieb:
Also können die parameter ja nicht von "js/jquery.form.js" kommen
Zum Vergrößern anklicken....
nee, das sowieso nicht, sie kommen von hier:new Option(Pizza[i].name, i, true, true)

Mugen schrieb:
kann es hier einfach nur für "index" stehen? wäre das möglich?
Zum Vergrößern anklicken....
was sagt denn die doku? jQuery.each() | jQuery API Documentation


Mugen schrieb:
nur bräuchte ich da irgendwie ne Erklärung wie das "function(i)" dann mit "(new Option(Pizza.name, i)" dieser Zeile zusammenhängt, damit ich es auch wirklich verstehe.
Zum Vergrößern anklicken....

das i wird einmal genutzt um den namen des i-ten arrayeintrages zu ermitteln und einmal an das Option-objekt übergeben, was es bedeutet steht oben im link.
 
was sagt denn die doku? jQuery.each() | jQuery API Documentation
Zum Vergrößern anklicken....

Die besagt, dass der callback, also die Funktion aus ( Integer indexInArray, Object value ) besteht. Da hier aber nur 1 parameter im callback ist, tipp ich mal auf IndexInArray :D

Code: 
new Option(Pizza[i].name, i, true, true)

das option-object bekommt dann quasi gesagt: Nim als value den index (also 0-4)?

die boolean-parameter werden also erst dann gebraucht, wenn zb ein reset-button hinzu kommt (das wird dann wohl in eine der nächsten Aufgaben kommen ^^)

Soweit so gut, hab jetzt schon echt viel gelernt - va dass man sich die API ducumentation gut ansehen soll :)

Weiter gehts:
Code: 
$('#Bestellen').click(function(){
                    $_Pizza = $('#dropdown').val();
                    $_zutaten = Pizza[$_Pizza].zutaten.length;
                    $_Preis = 3 + $_zutaten * 0.5;
                    alert("Pizza: " + Pizza[$_Pizza].name +"\n"+ "Zutaten: "+ Pizza[$_Pizza].zutaten + "\n" + "Preis: " + $_Preis + " Euro");
                });
1. Zeile: dem Element mit der id="bestellen" wird quasi eine onclick funktion hinzugefügt.
2. Zeile: Was "$_" bedeutet bin ich mir unsicher... "$" ist der selector und "_" gibt quasi an, das jetzt eine neue Variable kommt? Dieser wird dann der value von dem ausgewählten dropdown-dings zugewiesen(also der index).
3.Zeile: Wieder neue Variable, der dann ein Integer zugewiesen wird (also die Anzahl der Zutaten)
usw den Rest versteh ich dann schon, wenn das oben beschriebene korrekt ist. "$_" ist an sich das wichtige, da hab ich in google auch viele verschiedene Sachen gelesen 0.o
Mein Problem war die ganze Zeit, dass ich nicht verstanden hab, wie man dem dropdown den Inhalt der Objekte zuweist. Daweil wird das ja gar nicht gemacht, sondern es wird nur der Index zugewiesen und mit dem Index werden dann die Daten innerhalb der alert()-funktion abgefragt..


@ tsseh:
Mega Danke schonmal, hast mir viel geholfen :)
 
Mugen schrieb:
2. Zeile: Was "$_" bedeutet bin ich mir unsicher... "$" ist der selector und "_" gibt quasi an, das jetzt eine neue Variable kommt? Dieser wird dann der value von dem ausgewählten dropdown-dings zugewiesen(also der index).
Zum Vergrößern anklicken....
das $_ gehört mit zum variablennamen und hat keine besondere bedeutung, es wird einfach eine variable $_Pizza angelegt und der value zugewiesen, was dienem index entspricht. die variable hätte man auch wieder i nennen können oder index, oder ...

- - - Aktualisiert - - -

ach, was unter anderem schlecht ist an diesem code, es werden globale variable angelegt.
besser wäre
Code: 
$('#Bestellen').click(function()
{
  var idx = $('#dropdown').val();
  var zutaten = Pizza[idx].zutaten.length;
  var preis = 3 + zutaten * 0.5;
  alert("Pizza: " + Pizza[idx].name +"\n"+ "Zutaten: "+ Pizza[idx].zutaten + "\n" + "Preis: " + preis + " Euro");
});
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben