每次迭代 express-handlebars 时，只有第一个值被改变

Question

我在我的节点应用程序中使用 express-handlebars。在我的一种形式中，我将 2018-12-01 (YYYY MM DD) 格式的数据存储为字符串。我还将时间存储为 24 小时格式的字符串 13:45:00

我已经定义了一个脚本来使用 moment 来更改日期格式：

<script type="text/javascript">
    (function () {
        var NowMoment = $('#displayMoment').val();
        var Date = moment(NowMoment);
        var eDisplayMoment = document.getElementById('output');
        // display output in the preferred format
        eDisplayMoment.innerHTML = Date.format('MMM Do YYYY');
    })();
</script>

在我的 .handlebars 模板中，我使用以下代码显示接收到的数据：

{{#each tasks}}
    <input id="displayMoment" value="{{taskDate}}" hidden>
    <p>{{taskName}} {{taskDate}} {{taskTime}} {{taskStatus}} <span id="output"></span>


        <a class="btn u-btn-primary g-rounded-50 g-py-5" href="/starttask/{{id}}">
            <i class="fa fa-edit g-mr-5"></i> start task
        </a>
    </p>
    {{/each}}

如您所见，我有一个分配了 {{taskDate}} 的隐藏输入，我在脚本中获取它的值并将其格式化以显示在 span 标记中。

问题是： 只有第一个任务格式化日期并显示它，第二个或连续任务不显示格式化日期。

Answer 1

id 不能相同。 HTML 规范要求它是 唯一的 。因此，我们可以从 span 和 input 元素中删除 id 属性，而是为它们提供适当的 class 属性定义：

<span class="output"></span>

<input class="displayMoment" value="{{taskDate}}" hidden>

然后让我们使用 getElementsByClassName(...) 而不是 document.getElementById(...) 因为根据 documentation, getElementById() returns a single 元素对象表示其 id 属性匹配指定字符串的元素。假设输入值和跨度之间存在 1 对 1 的关系，我们正在尝试更改值，因为我们可以按照以下方式做一些事情：

 <script type="text/javascript">
        (function () {
            var inputEles = document.getElementsByClassName("displayMoment");
            var spanEles = document.getElementsByClassName("output");
            for(var i=0; i<spanEles.length; i++) {
              var Date = moment(inputEles[i].value);
              spanEles[i].innerHTML = Date.format('MMM Do YYYY');
            }
        })();
    </script>

希望对您有所帮助！

每次迭代 express-handlebars 时，只有第一个值被改变

only first value is changed when iterating through express-handlebars each

javascript

express-handlebars