2015-11-20 1 views
0

У меня проблема с jquery, я использую следующий код, чтобы получить даты в формате json, этот код работает правильно.Обратный отсчет JQuery

В 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> 

Изображение лучше объяснить.

enter image description here

UPDATE

Wihich этот код, я только показать одну дату

<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> 
+0

что делает функция _countdown_ делать? это плагин 'jquery'? –

ответ

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')); 
}); 
0

Вы можете использовать стандартный 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); 
} 
+0

Какой код я могу показать только одну дату :( – jc1992

+1

Убедитесь, что вы выбрали '' '' '$ (" .prueba ") .append ('

');' '' 'там как раньше, я просто пытался чтобы указать вам в правильном направлении, показывая вам, как итерации по объекту – jaggedsoft

+0

Пример @jcsa обновлен – jaggedsoft

0

сделать это:

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

И это все