如何在javascript中的对象数组中访问对象数组中的对象

因此,我是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>
评论