только первое значение изменяется при переборе каждого экспресс-руля - PullRequest
Новая
       7

только первое значение изменяется при переборе каждого экспресс-руля

0 голосов
/ 01 февраля 2019

Я использую экспресс-руль в моем приложении узла.В одной из моих форм я храню данные в формате 2018-12-01 (ГГГГ ММ ДД) в виде строки.Я также храню время в виде строки в 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.

Проблема заключается в следующем: Только первая задача форматирует дату и показывает ее, вторая или последовательные задачи не показывают отформатированную дату.

1 Ответ

0 голосов
/ 01 февраля 2019

Идентификатор не может быть тем же .Спецификация HTML требует, чтобы он был уникальным .Так что давайте можем удалить атрибут id из ваших элементов span и input и вместо этого дать им соответствующее определение атрибута class вместо: 

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

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

Затем давайте использовать getElementsByClassName(...) вместо document.getElementById(...)поскольку согласно документации , 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>

Надеюсь, это поможет!

...