javascript - JS : Clicking on a object from array

Question

我有一个包含在 HTML 中的对象数组。 我必须能够点击<a href='#' class='addToCart'>Order</a> 并将单击的对象数据添加到我的 console.log("...");。

执行此操作的最佳方法是什么？

片段:

"use strict";

document.addEventListener('DOMContentLoaded', loadMeals);

const meals = [
    {
        id: 1,
        title: 'Strawberry Salad with Poppy Seed Dressing',
        img: 'Strawberry-Salad-with-Poppy-Seed-Dressing.jpg',
        book: 1,
        calories: 298,
        servings: 3,
        type: 'lunch',
        price: 15,
        cook: 'Jenny Jefferson',
        quantity: 10,
    },
    {
        id: 2,
        title: 'Cashew Turkey Salad Sandwiches',
        img: 'turkey-sandwich.jpg',
        book: 2,
        calories: 198,
        servings: 2,
        type: 'lunch',
        price: 9,
        cook: 'Jenny Jefferson',
        quantity: 10
    }
];


function loadMeals() {
    let i = 0;
    let id = 1;
    let fillMealList = document.querySelector("#fillMealList");
    for (let i = 0; i < meals.length; i++) {
        let item = meals.find(item => item.id === id);
        fillMealList.innerHTML +=
            "<article>"+
            "<h3>" + item.title + "</h3>"+
            "<figure>"+
            "<img src='images/" + item.img + "'" +">" +
            "<figcaption>"+
            "Meal by: " +"<span>" + item.cook + "</span>" +
            "</figcaption>" +
            "</figure>"+
            "<div class='info'>"+
            "<p>€ <span>" + item.price + "</span>" + "/pp" + "</p>" +
            "<a href='#' class='addToCart'>Order</a>"+
            "</div>"+
            "</article>";
        id++;
    }
}

<div id="mealList">
            <div class="flexcontainer" id="fillMealList"></div>
            </div>

Answer 1

更改您的超链接 HTML，如下所示:

"<a href='javascript:logMeal(" + item.id + ")' class='addToCart'>Order</a>"+

并添加一个名为 logMeal 的新函数如下:

function logMeal(id) {
    console.log(meals.find(item => item.id === id));
}