Question

在使用时间戳记，moment.js和founddrama提供的实现示例时，我在html站点中添加了以下内容：

<span id="then" data-date="Aug 22 2018 11:33:00 GMT-0700 (PDT)"></span>

<script>
      $(document).ready(function(){
        var then = $('#then'),
            date = moment(new Date(then.attr('data-date'))),
            update = function(){
                       then.html(date.fromNow());
                     };

        update();
        setInterval(update, 60000);
      });

      </script>

输出结果成功。

但是，我想添加多个时间戳。

为了成功渲染，我以这种方式编码：

<span id="then" data-date="Aug 18 2018 07:33:00 GMT-0700 (PDT)"></span>

<span id="then1" data-date1="Aug 3 2018 16:33:00 GMT-0700 (PDT)"></span>

<script>
      $(document).ready(function(){
        var then = $('#then'),
            date = moment(new Date(then.attr('data-date'))),
            update = function(){
                       then.html(date.fromNow());
                     };

        update();
        setInterval(update, 60000);
      });

      </script>

<script>
      $(document).ready(function(){
        var then = $('#then1'),
            date = moment(new Date(then.attr('data-date1'))),
            update = function(){
                       then.html(date.fromNow());
                     };

        update();
        setInterval(update, 60000);
      });

      </script>

我正在寻找一种简洁明了的方法来正确地将javascript代码分组，并放置在一个脚本块中，而不是两个。

Answer 1

这将找到具有该类的所有DOM元素，然后找到它们的每个数据日期属性并将其内部HTML设置为moment.js对象。

<span class="then" data-date="Aug 22 2018 11:33:00 GMT-0700 (PDT)"></span>
<span class="then" data-date="July 15 2018 9:33:00 GMT-0700 (PDT)"></span>

<script>
$(document).ready(function(){
  var dates = $('.then');
  $.each(dates, function(){
    var date = moment(new Date($(this).attr('data-date')))
    $(this).html(date.fromNow());
  })
});
</script>

Answer 2

首先提供用于跨越元素的类名。然后解析每个span元素。将数据属性设为通用，即数据日期，并且每个跨度都不要不同。然后解析所有范围并附加html。

<span class="then" data-date="Aug 18 2018 07:33:00 GMT-0700 (PDT)"></span>

<span class="then" data-date="Aug 3 2018 16:33:00 GMT-0700 (PDT)"></span>

<script>
  $(document).ready(function(){
    $('.then').each(function(i) {
      var $this = $(this);
      var date = moment(new Date($this.attr('data-date')));
      var update = function() {
         $this.html(date.fromNow());
      };
      update();
      setInterval(update, 60000);
    });

   });
  </script>

Javascript语法对齐（moment.js）

2 个答案: