首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在生成的HTML代码中为每个数据-切换=“modal”和data=“exampleModal”添加一个数字

在生成的HTML代码中为每个数据-切换=“modal”和data=“exampleModal”添加一个数字
EN

Stack Overflow用户
提问于 2022-08-09 15:50:56
回答 1查看 33关注 0票数 0

我有一些映射的json数据来在容器中显示结果。生成的html中的每个列表都必须打开一个单独的模式窗口。为此,我需要在生成的代码中将一个数字关联到每个data-toggle="modal"和每个data-target="exampleModal"

我试着添加data-modal="modal${res[i]},但没有这样的数字。

生成的代码:

代码语言:javascript
复制
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("");

在这里加一个数字的正确方法是什么?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-09 17:10:59

您似乎要多次遍历res,一次用map(),一次用for(.)。但是,您的for-循环将在第一次迭代时返回,因此不会达到后续迭代。您可以在map():res.map((el,i) => {.}中包含一个索引,然后使用i实例,而不是单独的for-循环。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73294695

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档