Question

我已经将数据渲染到EJS中，现在使用while循环，我想循环浏览数据并将其显示在一行上。例如，假设数据是具有名称属性的对象数组。我的名字是['Bob'，'Chris'，'Sarah']。将数据发送到EJS之后，我希望Bob出现，然后过一段时间Bob消失了，然后Chris出现了，然后Sarah出现了。

截至目前，我的代码在多行中一次全部输出它们，而不是我期望的一次输出。

<body>
    <% var current = 0; %>
    <% while (current < 2){ %>
        <h1> Hey <%= person[current].name %>, how are you doing? </h1>
    <%    current += 1;
    };%>
</body>

输出应该在一行上：嗨，CURRENT NAME，你好吗？然后，当前名称应不断更改。

相反，代码输出三行，每个名称一行。有人知道如何解决此问题吗？谢谢。

Answer 1

我认为您将模板处理（产生静态输出）与DOM元素的动态更新混淆了。对于前端框架而言，后者更是一个问题（尽管您提供的内容在Vanilla JS中足够简单）。

我会考虑仅使用名称的占位符创建一个模板，然后使用计时器更新其中的文本：

setInterval(3000, function(){
    var span = document.getElementById('name-span');
    if ('textContent' in span) {
        span.textContent = person[current].name;
    } else {
        span.innerText = person[current].name;
    }
    current = (current + 1) % person.length;
}

当然，您需要找到一种更好的方式来访问人和当前信息，而不是使用全局变量。

EJS中的While循环显示在一行上

1 个答案: