Javascript语法对齐(moment.js)
Javascript语法对齐(moment.js)
提问于 2018-08-23 04:27:08
在使用时间戳、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代码分组，并将其放在一个脚本块中，而不是两个。
回答 2
Stack Overflow用户
发布于 2018-08-23 05:31:05
这将查找包含该类的所有DOM元素，然后找到它们的每个data-date属性，并将它们内部的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>Stack Overflow用户
发布于 2018-08-23 05:41:17
首先，提供跨越元素的类名。然后解析到每个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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51974615
复制相关文章
相似问题