AJAX函数未通过

Question

I need to make that when timer ends I get "Not active" message instead of "Active". The timer and code seems to work until this $('.clock').eq().countdown(inputDate) after this code, the function not working, no console.log's showing when checking. The same function works on one object but when it comes to foreach loop it doesnt work. This is my html line which should replace:

<td><span class="timeProduct label label-success"></span>

This is my ajax

$(document).ready(function() {
    var inputDate = new Date($('#count').text());
    var timeProduct = $(".timeProduct");
    timeProduct.html('Aktyvus');
    inputDate.setDate(inputDate.getDate() + 7);
    $(".clock").countdown(inputDate, function(event) {
            $(this).text(
                event.strftime('%D dienos %Hh %Mmin %Ssek')
            );

            $('.clock').eq().countdown(inputDate)
                .on('finish.countdown', function(event) {
                    var timeProduct = $(".timeProduct");
                    timeProduct.removeClass("label label-success");
                    timeProduct.addClass('label label-danger');
                    timeProduct.html("Pasibaigė");
                });

        });
});

EDIT

This is my HTML with foreach loop

@foreach($bids as $b)
<tr>
    <td><img style="height: 50px" src="{{$b->product->img_1}}">
        <strong><a href="/preke/{{$b->product->id}}/{{$b->product->slug}}">{{$b->product->title}}</a></strong>
    </td>
    <td>{{number_format($b->product->price, 2)}} EUR</td>
    <td>{{$b->created_at}}</td>
    <td><span id="count">{{$b->product->created_at}}</span></td>
    <td><span class="clock"></span></td> // This is where timer appears
    <td><a style="font-size: 11px" href="/unmark-auction/{{$b->id}}" class="unCheck btn btn-danger"><i class="glyphicon glyphicon-remove"></i> Nebesekti</a></td>
    <td><span class="timeProduct label label-success"></span>
    </td>
</tr>
@endforeach

And this is updated AJAX

$(document).ready(function() {
    var inputDate = new Date($('#count').text());
    var timeProduct = $(".timeProduct");
    timeProduct.html('Aktyvus');
    inputDate.setDate(inputDate.getDate() + 7);
    $(".clock").countdown(inputDate, function(event) {
        $(this).text(
            event.strftime('%D dienos %Hh %Mmin %Ssek')
        );
        var index = $(".clock").index(this);
        $('.clock').eq(index).countdown(inputDate)
            .on('finish.countdown', function(event) {
                var timeProduct = $(".timeProduct");
                timeProduct.removeClass("label label-success");
                timeProduct.addClass('label label-danger');
                timeProduct.html("Pasibaigė");
            });
    });
});

Answer 1

In your code you are only calling your countdown function on the first .clock element. You should call your countdown function inside a loop like this:

$('.clock').each(function(index, elt) {
    elt.countdown(inputDate).on('finish.countdown', function(event) { 
    var timeProduct = $(this).parent().find(".timeProduct");
    timeProduct.removeClass("label label-success");
    timeProduct.addClass('label label-danger');
    timeProduct.html("Pasibaigė");
  });
});

UPDATE :

First of all you have to use a class name instead of an id for each "clock" element in your table. Then you have to loop on each row of your table to apply countdown function on each clock element. You also did not correctly use jQuery countdown function (which I guess is this one: http://hilios.github.io/jQuery.countdown/). The "finish" event should be attached to the DOM element on which you previously attached a countdown function.

In your code you were attaching the same countdown function to every clock element, then you were attaching another countdown to the first clock element in the callback function which did not make any sense.

You should instead do something like this:

$('table tr').each(function() {
    var inputDate = new Date($(this).find('.count').text());
    var timeProduct = $(this).find('.timeProduct');
    timeProduct.html('Aktyvus');
    inputDate.setDate(inputDate.getDate() + 7);

    $(this).find('.clock').countdown(inputDate, function(event) {
      $(this).text(event.strftime('%D dienos %Hh %Mmin %Ssek'));
    }).on('finish.countdown', function(event) {
      var timeProduct = $(".timeProduct");
      timeProduct.removeClass("label label-success");
      timeProduct.addClass('label label-danger');
      timeProduct.html("Pasibaigė");
    });

  });

Here is the working Fiddle: https://jsfiddle.net/mo6fhum5/