Question

我有jquery的问题，我使用以下代码以json格式获取日期，此代码可以正常工作。

在console.log（tiempo）中我可以看到这个日期

2015/11/21 12:34:56
ex.html:15 2016/10/10 12:34:56
ex.html:15 2017/10/10 12:34:56
ex.html:15 2018/10/10 12:34:56
ex.html:15 2019/10/10 12:34:56

然而在HTML中我只能看到我从json收到的第一个日期。

<script type="text/javascript">
    function tiempo(tiempo){
        console.log(tiempo);
        $('.clock').countdown(tiempo, function(event) {
            $(this).html(event.strftime('%D days %H:%M:%S'));
        });
    }    
</script>
<script type="text/javascript">
    var arr = [
        {"transporte":"Servei de Rodalies Barcelona","now":"2015/11/21 12:34:56"},
        {"transporte":"Serveis Regionals","now":"2016/10/10 12:34:56"},
        {"transporte":"Ferrocarrils","now":"2017/10/10 12:34:56"},
        {"transporte":"Metro","now":"2018/10/10 12:34:56"},
        {"transporte":"Tram","now":"2019/10/10 12:34:56"}
    ];
    jQuery.each(arr, function(index, value) {
        $( ".prueba" ).append('<div class="clock"></div>');
        tiempo(value.now);
    });
</script>

图像更好解释。

更新

这个代码，我只显示一个日期

<body>
    <div class="clock"></div>
</body>

<script type="text/javascript">
    function tiempo(tiempo){
        $('.clock').countdown(tiempo, function(event) {
            $(this).html(event.strftime('%D days %H:%M:%S'));
        });
    }    
</script>
<script type="text/javascript">
    var arr = [
        {"transporte":"Servei de Rodalies Barcelona","now":"2015/11/21 12:34:56"},
        {"transporte":"Serveis Regionals","now":"2016/10/10 12:34:56"},
        {"transporte":"Ferrocarrils","now":"2017/10/10 12:34:56"},
        {"transporte":"Metro","now":"2018/10/10 12:34:56"},
        {"transporte":"Tram","now":"2019/10/10 12:34:56"}
    ];
    for ( var i = 0 ; i < arr.length ; ++i ) {
        tiempo(arr[i].now);
    }
</script>

Answer 1

问题在于这段代码（特别是选择器：.clock）：

$('.clock').countdown(tiempo, function(event) {
  $(this).html(event.strftime('%D days %H:%M:%S'));
 });

您在这里所做的是使用类div设置所有clock元素的值，而不仅仅是您创建的最后一个元素。

您的问题有很多解决方案，但需要最少量更改的解决方案是使用jquery函数last，如此（从集合中选择最后一个元素）：

$('.clock').last().countdown(tiempo, function(event) {
  $(this).html(event.strftime('%D days %H:%M:%S'));
});

Answer 2

您可以使用标准for循环来遍历对象：

var arr = [
    {"transporte":"Servei de Rodalies Barcelona","now":"2015/11/21 12:34:56"},
    {"transporte":"Serveis Regionals","now":"2016/10/10 12:34:56"},
    {"transporte":"Ferrocarrils","now":"2017/10/10 12:34:56"},
    {"transporte":"Metro","now":"2018/10/10 12:34:56"},
    {"transporte":"Tram","now":"2019/10/10 12:34:56"}
];
for ( var i = 0 ; i < arr.length ; ++i ) {
    console.log(arr[i].now);
    $( ".prueba" ).append('<div class="clock"></div>');
    tiempo(value.now);
}

Answer 3

制作本：

for (var i = 0; i < arr.length; ++i) {
    var element = $('<div class="clock"></div>').html(tiempo(value.now));
    $(".prueba").append(element);
}

这就是

倒计时Jquery

3 个答案: