【问题标题】:how to create buttons that each one when clicked display a different set of buttons?如何创建每个在单击时显示一组不同按钮的按钮?
【发布时间】:2020-05-23 21:57:39
【问题描述】:

所以我是 HTML 和 JavaScript 的新手,我正在尝试创建一个按钮容器,当单击该容器时会显示不同的按钮容器,这样第二个容器中显示的唯一按钮就是与单击的按钮相关的按钮.第二个按钮应该将带有按钮文本的项目添加到有序列表中。我在 c# 中创建了 2 个类,一个名为 Dish,其中包含 nameprice 字段,另一个名为 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


    【解决方案1】:

    这是一个范围问题。您的变量 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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-09-27
      • 1970-01-01
      • 1970-01-01
      • 2020-06-14
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多