如何解决For 循环一个数字以在模板文字中创建按钮
对这个有点卡住了。
我正在循环遍历一个对象 (dataLayer.Tests
) 并在 DIV 中显示我的内容的值。以下是此对象外观的示例:
我通过使用 forEach
循环遍历我的对象来做到这一点。 (在这个例子中,我只是控制台。记录我的结果 result3
)。
我遇到的问题是,在我的 forEach
中,我想显示创建/显示按钮,具体取决于 totalVariants
键/值中的数字。
例如,如果 totalVariants
=== 2,我想创建 2 个按钮。如果是一个,我想创建 1 个按钮。
我知道我需要循环遍历这个特定的值,但我不确定如何在模板文字中执行此操作。
这是我的代码。
dataLayer.Tests.forEach((element,index,array) => {
let result3 = '';
let numberOfVariants = element.totalVariants;
if (numberOfVariants >= 1) {
for (i = 0; i < numberOfVariants; i++) {
console.log("The number is ",i + 1);
}
result3 += `
<div class="CRO-variant-result">
<p>Date Launched: ${element.date}</p>
<p>Test ID: ${element.id}</p>
<p>Test Description: ${element.name}</p>
<p>Variant Active: ${element.variant}</p>
<p>Total Variants: ${element.totalVariants}</p>
${(function () {
for (i = 0; i < element.totalVariants; i++) {
return `<button>${i}</button>`
}
})()}
</div>
`
console.log("result3",result3);
};
});
我见过包含 .map
和 object.keys
的解决方案,但这似乎不起作用/返回任何内容。 (可能因为我只需要遍历一个数字而不是数组等。
任何想法/指针,将不胜感激。
基本上,我不确定如何在模板文字中循环遍历一个数字并返回 x 个元素。
谢谢, 蕾娜
解决方法
numberOfVariants
是一个 number
,而不是一个 object
,所以你可以这样做的一种方法是创建一个新的该长度的递增数组(Array.from(Array(numberOfVariants).keys())
可以很好地做到这一点)然后 map
在你正在做的时候覆盖那个数组。
${Array.from(Array(numberOfVariants).keys()).map(i => (
`<button value="${i}">${i}</button>`
)).join('')}
我不太确定您想在按钮内显示什么(可能是当前数字的整数随着您的增加而增加)?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。