Question

我在节点应用程序中使用快速车把。在我的一种表单中，我将数据以字符串形式存储在2018-12-01（YYYY MM DD）格式中。我还将时间以字符串的形式存储为24小时格式13:45:00

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

<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()返回一个单个元素对象，该对象表示其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-Handlebar中进行迭代时，只有第一个值被更改

1 个答案: