【发布时间】:2020-05-23 21:57:39
【问题描述】:
所以我是 HTML 和 JavaScript 的新手,我正在尝试创建一个按钮容器,当单击该容器时会显示不同的按钮容器,这样第二个容器中显示的唯一按钮就是与单击的按钮相关的按钮.第二个按钮应该将带有按钮文本的项目添加到有序列表中。我在 c# 中创建了 2 个类,一个名为 Dish,其中包含 name 和 price 字段,另一个名为 Category name 字段和 dishes 列表。顶部的按钮应该是类别和类别内菜肴底部的按钮。我在 javascript 中创建了包含菜肴的数组(每个元素都是一个类别),并将它们放入包含所有类别的数组中。由于某种原因,只显示类别按钮,单击时不显示菜肴按钮。我不能确定,但相信问题出在我调用函数“createbuttons”和我发送它的参数时。可能是,我的处理方式是完全错误的,或者可能是一个愚蠢的错误。我将不胜感激任何帮助或建议,如果有不清楚的地方,请告诉我,以便我解决。 TIA!!!!
p.s 名字是希伯来语我希望没问题
菜品类:
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>
【问题讨论】:
标签: javascript c# html