javascript - 如何为数组中的每个单击元素动态更改信息模式 innerHTML

Question

我正在尝试收集一小部分食谱，其中四个已经存储在一个对象数组中，每个对象代表另一个食谱。我的问题是我想制作一个信息窗口，如果您愿意的话，它是一个模态窗口，它将显示有关存储在其对象内的每个单击食谱的信息。

问题是，每当我尝试设置所述模式的 innerHTML 时，我创建的 for 循环都会显示整个对象，到目前为止，我还没有找到如何让每次点击模式只显示一个食谱的信息。 (第一个链接应显示第一个食谱的详细信息，第二个链接应显示第二个食谱的详细信息，依此类推)。

我尝试了一个 for 循环，它应该根据单击的元素动态循环信息窗口的内容，但它显示了整个对象，到目前为止我不确定还有什么其他方法是更好的解决方案。

我的对象数组看起来像这样

var recipes = [
{
    key: 0,
    title: 'Pasta Carbonara',
    ingredients: 'etc',
    instructions: 'etc'
},
{
    key: 1,
    title: 'etc',
    ingredients: 'etc',
    instructions: 'etc'
},
and so on (4 objects)
]

我的 for 循环看起来像这样:

function openModal() {
    detailsModal.style.display = 'block';
    var modalContent = document.getElementById('modalInfo');
    var modalBody = ''; 
    for (var i=0; i < recipes.length; i++){
        modalBody += JSON.stringify(recipes[i]) 
    }
    modalContent.innerHTML = modalBody;
}

完整代码在这里:https://codepen.io/Ellie555/pen/KOwexB

这个问题真的很平凡，但如果您有任何建议，我将不胜感激。

Answer 1

一种方法是向 anchor 添加数据属性:

<a href="#" data-recipe-index="0">Pasta Carbonara</a>

然后使用这些属性来指示您的模态代码加载哪个配方:

function openModal(e) {
    detailsModal.style.display = 'block';
    var modalContent = document.getElementById('modalInfo');
    // The critical line:
    var modalBody = JSON.stringify(recipes[parseInt(e.currentTarget.dataset.recipeIndex)]);
    modalContent.innerHTML = modalBody;
}

完整代码:https://codepen.io/mac9416/pen/BXyPdO

旁白:我会 use <button> elements样式为链接而不是 anchor 以实现可访问性。