Javascript 当遍历每个快速把手时，仅更改第一个值

我正在节点应用程序中使用express Handlebar。在我的一个表单中，我以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>

（功能（）{
var NowMoment=$（'#displayMoment'）.val（）；
var日期=时刻（现在时刻）；
var edisplaymonent=document.getElementById（'output'）；
//以首选格式显示输出
edisplaymonent.innerHTML=Date.format（'MMM-Do-YYYY'）；
})();

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

{{#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}}

{{#每个任务}
{{taskName}{{taskDate}{{taskTime}}{{taskStatus}}

{{/每个}}

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

问题是：

---

只有第一个任务格式化并显示日期，第二个或连续的任务不显示格式化的日期。

id不能相同。HTML规范要求它是唯一的。因此，我们可以从

span

和

input

元素中删除id属性，并为它们提供适当的

class

属性定义：

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

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

---

希望这有帮助

你能详细说明你的问题吗？我不知道问题出在哪里。第二个或连续的任务是否意味着使用{{taskDate}}值的其他html元素格式不正确？我使用{{{each}}{{/each}}循环来显示所有任务。每个任务都有{startDate}，需要格式化并以正确的格式显示。问题是只有第一个任务的startDate是格式化的，但是第二个、第三个等等现在都显示出来了。你的标签是在页面的底部还是顶部？它在页面的底部，我也尝试过在{{each}中移动它，但结果是一样的。不用担心，尝试一下我的答案，看看这是否有助于进行更改。出于某种原因，它现在为两个任务显示了相同的日期，这是因为它获得了以下值：$（“#displayMoment”）.val（），并相应地设置了跨度。让我们对输入元素做同样的事情，它应该会有点混乱…我通过将id更改为class来更改输入标记，但日期没有变化。显示任务的相同日期请给我一分钟，我会调整我的答案以提供帮助。谢谢Nathan，非常感谢

 <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>