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

您上面的标记不是语义html，因为您没有重定向或导航。因此，我首先将<a href="#">...</a>标签替换为<button type="button">...</button>：

<div class="main">
  <div class="recipes" id="recipeSection">
    <div class="recipe-entry">
      <div class="name"><button type="button" id="0">...</button></div>
    </div>
    <div class="recipe-entry">
      <div class="name"><button type="button" id="1">...</button></div>
    </div>
    <div class="recipe-entry">
      <div class="name"><button type="button" id="2">...</button></div>
    </div>
    <div class="recipe-entry">
      <div class="name"><button type="button" id="3">...</button></div>
    </div>
  </div>
</div>

要回答您的问题，以动态更改数组中每个单击的元素的信息模式innerHTML！

将id添加到将被单击以将其与数组中所需对象相关联的每个元素
根据点击目标及其id过滤该数组

const data = recipes.filter(recipe => recipe.key === Number(event.target.id)); 
modalContent.innerHTML = JSON.stringify(data[0]);

我分叉并修改了您的代码。这是工作中的Demo。

注意：

如果不确定每个项目的数组中的key值（即动态），可以对其进行迭代并将其附加到DOM中。

Answer 2

一种方法是将数据属性添加到锚点：

10x10x1024

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

Add16

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

此外：我将use <button> elements的样式设置为链接，而不是用于辅助功能的锚点。

Answer 3

您还可以从Javascript创建列表，而不是用HTML静态创建列表。

我的代码在这里有注释： https://stackblitz.com/edit/js-bu6tz8?file=index.js

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

3 个答案: