在生成的 HTML 代碼中為每個 data-toggle="modal" 和 data-target="exampleModal" 添加一個數字

Question

我有一些映射的 json 數據以在容器中顯示結果。 生成的 html 中的每個列表都必須打開一個單獨的模態 window。 為此，我需要為生成的代碼中的每個data-toggle="modal"和每個data-target="exampleModal"關聯一個數字。

我試圖添加data-modal="modal${res[i]}但我沒有這樣得到一個數字。

生成的代碼：

const res = some.d.results; //arr of objects
let ul = document.querySelector('#test');
            const html = res.map(el=> {
                for (i = 1; i < res.length; i++) {
                    return `<li class="box-top box-top--feat" type="button" data-toggle="modal${res[i]}" data-target="exampleModal${res[i]}">
                                <a class="box-top__content" href="#">
                                    <div class="box-top__title__img2">
                                        <img class="availableImgs" alt="" src="${res.dirRef}${'/'}${res.fileRef}" />
                                    </div>
                                        <h2 class="box-top__title">${res.PersonA.Person}</h2>
                                        <h3 class="box-top__work">${res.Title}</h3>
                                </a>
                            </li>
                            <div class="modal fade" id="exampleModal${res[i]}" tabindex="-1">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-body">
                                            <p>${res.DescA.PersA]}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>`;
                }
            }).join("");

在這里添加數字的正確方法是什么？

Answer 1

您似乎多次循環 res，一次使用 map()，一次使用 for(...)。 但是隨后您的 for 循環將在第一次迭代時返回，因此不會到達后續迭代。 您可以在 map(): res.map((el,i) => {...} 中包含索引，然后使用i的實例，而不是單獨的 for 循環。