Speisekarte - Beilagen dynamisch hinzufügen

mario85 · 8. Oktober 2016

Hallo an alle, das Forum finde ich echt super und die tolle Mitarbeit der Mitglieder haut mich einfach um !

Genug geschleimt ;-)

Seit kurzer Zeit beschäftige ich mich mit JavaScript & Co. und möchte damit einige Dinge umsetzen.

Ein beispiel wäre eine Speisekarte wo man bsp. weitere Beilagen für jedes Gericht hinzufügen oder entfernen kann.

Mein Versuch unten würde vom Prinzip her funktionieren - jedoch nur für ein Gericht, hierbei wird lediglich die ausgewählte Beilage zu den bestehenden hinzugefügt, der Button verschwindet anschließend damit die Beilage nicht mehrmals ausgewählt werden kann !

Meine Frage:
1. wie kann man das vereinfachen, sodass es für mehrere Gerichte funktioniert ?

2. Hinsichtlich der auswählbaren Beilagen bei Pizzen bsp.: "Extra Käse, Salami, Schinken, Zwiebeln"
aber bei Fleischgerichte müsste es bsp: "Pommes, Reis, Bratkartoffeln" sein - wie könnte man dies umsetzen ?

Für jede Hilfe bin ich sehr dankbar.

Gruss
Mario

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").append(", Salami ");
    });
$("#btn2").click(function(){
        $("p").append(", Schinken ");
    });
});

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#btn1").hide(1000);
    });
});

$(document).ready(function(){
    $("#btn2").click(function(){
        $("#btn2").hide(1000);
    });
});
</script>
</head>
<body>
<h1> Pizza Muster </h1>
<p>Zutaten: Pizzateig, Tomaten</p>

<h3>Weitere Beilagen</h3>
<button id="btn1">Salami</button>
<button id="btn2">Schinken</button>
<br>

</body>
</html>

Sempervivum · 8. Oktober 2016

Zunächst mal: Du brauchst nur ein document-ready und kannst darin alle Anweisung zusammen fassen:

Code:

$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").append(", Salami ");
        $(this).hide(1000);
    });
    $("#btn2").click(function(){
        $("p").append(", Schinken ");
        $(this).hide(1000);
    });
});

Dann würde ich empfehlen, die Gerichte und die Zutaten in einer Datenstruktur abzulegen:

Code:

var zutaten = {
    pizza: ["Salami", "Pilze",  "Schinken"],
    fleisch: ["Pommes", "Reis", "Bratkartoffeln"]
};

Für die Gerichte müsstest Du dann ein Auswahlfeld anlegen (select-option). Die Buttons mit den Zutaten dynamisch anlegen:

Code:

var btnZutat = $("<button id=" + deine_zutat + ">" + deine_zutat + "</button>";

und zum Container mit append() hinzu fügen.
U. U. brauchst Du noch einen Schalter, der angibt, ob mehrere Zutaten möglich sind, wie bei Pizza oder nur eine wie bei Fleisch.

Speisekarte - Beilagen dynamisch hinzufügen

mario85

Grünschnabel

Sempervivum

Erfahrenes Mitglied

Neue Beiträge