因此，我是HTML和JavaScript的新手，我试图创建一个按钮容器，该按钮容器在单击时显示另一个按钮容器，这样，第二个容器中显示的唯一按钮就是与单击按钮相关的按钮。第二个按钮应该将带有按钮文本的项目添加到有序列表。我在c＃中创建了2个类，一个叫做Dish，带有字段名称和价格，另一个叫类别，带有字段名称和菜肴列表。顶部的按钮应该属于该类别，而按钮的底部应该属于该类别。我在javascript中创建了包含菜式的数组（每个元素都是一个类别），并将它们放入包含所有类别的数组中。由于某种原因，仅显示类别按钮，而单击时未显示餐具按钮。我不确定，但是，问题在于当我调用函数“ createbuttons”和要发送的参数时。可能是因为我的处理方式完全错误，或者这可能是一个愚蠢的错误。如果有任何帮助或建议，我将不胜感激。如果有任何不清楚的地方，请告诉我，以便我进行修复。 TIA ！！！ ps名称是希伯来语，我希望可以
菜式：
public class Dish
{
public string name;
public int price;
public Dish(string Name, int Price)
{
name = Name;
price = Price;
}
public string Name { get; set; }
public int Price { get; set; }
}
}
类别类
public class category
{
public string name;
public IList<Dish> dishes;
public category(string Name, IList<Dish> Dishes)
{
name = Name;
IList<Dish> dishes = Dishes;
}
public string Name { get; set; }
public IList<Dish> Dishes { get; set; }
}
查看代码
<style>
.categories-buttons {
display: grid;
grid-template-columns: repeat(5, minmax(120px, 1fr));
grid-gap: 0px;
top: 0;
}
.dishes-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
top: 50px;
}
.topButtons {
background-color: lightseagreen;
padding: 25px;
/*border: 1px solid lime;*/
color: black;
text-align: center;
display: inline-block;
font-size: 20px;
border-radius: 8px;
transition-duration: 0.5s;
}
.topButtons:hover {
background-color: white;
color: black;
}
.topButtons:active {
background-color: white;
box-shadow:0 5px #666;
transform: translateY(4px);
}
.bottomButtons {
background-color: darkcyan;
padding: 25px;
border: 1px solid sienna;
color: white;
text-align: center;
display: inline-block;
font-size: 20px;
}
.order {
position: relative;
float: right;
top: 0;
height: 350px;
overflow: scroll;
}
.rightside {
display: grid;
grid-template-columns: auto;
float: right;
width: 20%;
}
.leftside {
display: grid;
grid-template-columns: auto;
float: left;
grid-row-gap: 60px;
width: 50%;
}
.totalLine {
border: 1px solid black;
border-radius: 5px;
float: right;
top: 20px;
}
</style>
<body style="background-color:lightgray;">
<div class="rightside">
<ol class="order" id="listOfOrder"></ol>
<div class="totalLine">total: </div>
</div>
<div class="leftside">
<div class="categories-buttons"></div>
<div class="dishes-buttons" id="bottom"></div>
</div>
<script>
var saladsDishes = [];
saladsDishes.push({name: 'סלט בטטה', price: 76});
saladsDishes.push({ name: 'סלט טוסט', price: 76 });
saladsDishes.push({ name: 'סלט חלומי', price: 76 });
saladsDishes.push({ name: 'סלט פאטוש', price: 76 });
saladsDishes.push({ name: 'סלט טונה', price: 76 });
var salads = { name: 'סלטים', dishes: saladsDishes };
var italianDishes = [];
italianDishes.push({ name: 'פנה', price: 76 });
italianDishes.push({ name: 'ספגטי', price: 76 });
italianDishes.push({ name: 'פפרדלה', price: 76 });
italianDishes.push({ name: 'רביולי בטטה', price: 76 });
italianDishes.push({ name: 'רביולי גבינות', price: 76 });
italianDishes.push({ name: 'פיצה', price: 76 });
var italian = { name: 'איטלקי', dishes: italianDishes };
var sandwichesDishes = [];
sandwichesDishes.push({ name: 'כריך חביתה', price: 76 });
sandwichesDishes.push({ name: 'כריך אבוקדו', price: 76 });
sandwichesDishes.push({ name: 'כריך סלמון', price: 76 });
sandwichesDishes.push({ name: 'כריך טונה', price: 76 });
sandwichesDishes.push({ name: 'כריך חלומי', price: 76 });
sandwichesDishes.push({ name: 'טוסט', price: 76 });
sandwichesDishes.push({ name: 'טוסט גבינות', price: 76 });
var sandwiches = { name: 'כריכים', dishes: sandwichesDishes };
var breakfestDishes = [];
breakfestDishes.push({ name: 'ארוחת בוקר יחיד', price: 76 });
breakfestDishes.push({ name: 'ארוחת בוקר זוגית', price: 76 });
breakfestDishes.push({ name: 'בוקר ספרדי', price: 76 });
breakfestDishes.push({ name: 'כריכון וקפה', price: 76 });
breakfestDishes.push({ name: 'קפה ומאפה', price: 76 });
var breakfest = { name: 'ארוחות בוקר', dishes: breakfestDishes };
var appetizerDishes = [];
appetizerDishes.push({ name: 'פסטייה', price: 76 });
appetizerDishes.push({ name: 'סמוסה', price: 76 });
appetizerDishes.push({ name: 'פרחי כרובית', price: 76 });
appetizerDishes.push({ name: 'לביבות ברוקולי', price: 76 });
appetizerDishes.push({ name: 'חציל שרןף', price: 76 });
appetizerDishes.push({ name: 'מרק הבית', price: 76 });
var appetizers = { name: 'מנות פתיחה', dishes: appetizerDishes };
var allColdDrinks = [];
allColdDrinks.push({ name: 'קולה', price: 76 });
allColdDrinks.push({ name: 'ספרייט', price: 76 });
allColdDrinks.push({ name: 'פאנטה', price: 76 });
allColdDrinks.push({ name: 'פיוז-טי', price: 76 });
allColdDrinks.push({ name: 'סודה', price: 76 });
allColdDrinks.push({ name: 'מים מינרליים', price: 76 });
var coldDrinks = { name: 'שתייה קרה', dishes: allColdDrinks };
var allCategories = [];
allCategories.push(salads, italian, sandwiches, breakfest, appetizers, coldDrinks);
function createListItem(ButtonText) {
var list = document.getElementsByClassName("order")[0];
var listItem = document.createElement('li');
listItem.appendChild(document.createTextNode(ButtonText));
list.appendChild(listItem);
}
function createbuttons(k) {
document.getElementById("bottom").innerHTML = "";
var x = document.getElementsByClassName("dishes-buttons")[0];
for (var i = 0; i < k.length; i++) {
var btn = document.createElement("button");
btn.innerText = k[i].name;
btn.className = "bottomButtons";
btn.onclick = function () { createListItem(btn.textContent) };
x.append(btn);
}
}
var div = document.getElementsByClassName("categories-buttons")[0];
for (var i = 0; i < allCategories.length; i++) {
var btn = document.createElement("button");
btn.innerText = allCategories[i].name;
btn.className = "topButtons";
btn.onclick = function () { createbuttons(allCategories[i].dishes) };
div.append(btn);
}
</script>
</body>
