[英]how to create buttons that each one when clicked display a different set of buttons?
所以我是 HTML 和 JavaScript 的新手，我正在嘗試創建一個按鈕容器，單擊該容器時會顯示不同的按鈕容器，這樣第二個容器中顯示的唯一按鈕就是與單擊的按鈕相關的按鈕。 第二個按鈕應該將帶有按鈕文本的項目添加到有序列表中。 我在 c# 中創建了 2 個類，一個名為Dish ，帶有字段名稱和價格，另一個稱為Category ，帶有字段名稱和菜餚列表。 頂部的按鈕應該屬於類別，底部的按鈕應該是類別內的菜餚。 我在 javascript 中創建了包含菜餚的 arrays（每個元素都是一個類別），並將它們放在包含所有類別的數組中。 由於某種原因，只顯示類別按鈕，單擊時不顯示菜餚按鈕。 我不能確定，但相信問題出在我調用 function “createbuttons”和我發送的參數時。 可能是，我的處理方式是完全錯誤的，或者可能是一個愚蠢的錯誤。 我將不勝感激任何幫助或建議，如果有不清楚的地方請告訴我，以便我解決。 蒂亞！！！！
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>
這是 scope 問題。 您的變量i始終為 6，並且在單擊按鈕時超過了數組長度。 在這種情況下，您需要使用let ：
for (let 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);
}
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 (let 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); }
.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; }
<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>
當我單擊主組/按鈕陣列中的一個按鈕時如何顯示一組按鈕
[英]How to display one set of buttons when I click on one button of the main set/array of buttons
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.