将最后执行的值返回给动态生成的每个 div

Question

我在 wordpress 工作，那里有活动面板，上面有即将举行的活动的详细信息，我正在显示下一次或即将举行的活动还剩多少时间。我正在从数据库中动态获取值，并且我正在管理用户在管理面板中给出的日期之前为即将发生的事件剩下的时间。现在时间快到了，但问题是它为所有即将发生的事件显示一次意味着为所有事件重复一次。

这是 jquery 脚本：

$(document).ready(function(){
   var calculate=$('.thematchdate').val();
   $('.counter').countdown(calculate, function(event) {
       $(this).html(event.strftime(''
      + '<span>%D <br> <small>days</small></span>  '
      + '<span>%H <br> <small>hr</small> </span>  '
      + '<span>%M <br> <small>min</small> </span>  '
      + '<span>%S <br> <small>sec</small></span> '));
   });
});

我也试过！

var calculate="";
$('.thematchdate').each(function(index) {
   calculate=$(this).val();

   $('.event-ones').each(function(index){
      alert(calculate+''+index);
      $(this).countdown(calculate, function(event) {
        $(this).html(event.strftime(''
          + '<span>%D <br> <small>days</small></span>  '
          + '<span>%H <br> <small>hr</small> </span>  '
          + '<span>%M <br> <small>min</small> </span>  '
          + '<span>%S <br> <small>sec</small></span> '));
      });
   });
});

这是我从中获取价值并返回剩余时间的标记：

<input type="hidden" class="thematchdate" value="<?=get_post_meta($p, '_start_date', true); ?>">
<div id="event-one" class="counter event-ones"></div>

这是该面板的完整标记

 //loop over each post
                    foreach($posts as $p){
                       ?>
                                    <!-- Item  Event  -->
                                    <li>
                                        <div class="content-counter">
                                            <p class="text-center"> 
                                                <i class="fa fa-clock-o"></i> 
                                                Countdown Till Start
                                            </p>
                 <input type="hidden" class="thematchdate" value="<?=get_post_meta($p, '_start_date', true); ?>">
                    <div id="event-one" class="counter event-ones"></div>
                                            <ul class="post-options">
                                                <li><i class="fa fa-calendar"></i>June 12, 2014</li>
                                                <li><i class="fa fa-clock-o"></i>Kick-of, 12:00 PM</li> 
                                            </ul>
                                            <ul class="list-diary">
                                                <!-- Item List Diary --> 
                                                <li>
                                                    <h5><?=get_post_meta($p,'_league_title',true); ?><span><?=get_post_meta($p, '_start_date', true); ?>- 11:00</span></h5>
                                                    <ul class="club-logo">
                                                        <li>
 <img style="width:100px; height:89px;" class="img img-circle img-responsive" src="<?=get_post_meta($p , '_boj_mbe_image1', true); ?>" alt=""> 
<h6><?=get_post_meta($p, '_team_name1', true); ?></h6>
                                                        </li>
                                                        <li><span>Vs</span></li>
                                                        <li>
  <img style="width:100px; height:89px;" class="img img-circle img-responsive" src="<?=get_post_meta($p , '_boj_mbe_image2', true); ?>" alt="">
 <h6><?=get_post_meta($p, '_team_name2', true);?></h6>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <!-- End Item List Diary --> 
                                            </ul>
                                            <a class="btn btn-primary" href="http://localhost/football/events/">
                                                VIEW EVENT PAGE
                                                <i class="fa fa-trophy"></i>
                                            </a>
                                        </div>
                                    </li>
                                    <? } ?>

Answer 1

您的第一次尝试不是迭代每个事件来单独计算它，因此所有事件的计算时间都相同。

您的第二次尝试是迭代每个事件并单独计算它，但是对于每个计算值，它都将其打印到所有事件，因此最后一个计算值显示给所有事件。

因此，只需将第二次尝试更改为仅将计算出的时间打印到其对应的元素，如下所示：

var calculate="";
$('.thematchdate').each(function(index) {
    calculate=$(this).val();

    $(this).next('.event-ones').countdown(calculate, function(event) {
        $(this).html(event.strftime(''
            + '<span>%D <br> <small>days</small></span>  '
            + '<span>%H <br> <small>hr</small> </span>  '
            + '<span>%M <br> <small>min</small> </span>  '
            + '<span>%S <br> <small>sec</small></span> ')
        );
    });
});

在此示例中，我使用 jQuery's .next 获取以下 .event-ones 同级元素并调用 countdown 小部件，因为它遍历每个 .thematchdate 元素，如您演示的标记：

Here is the Mark up from which i am taking up value and returning time left:
<input type="hidden" class="thematchdate" value="<?=get_post_meta($p, '_start_date', true); ?>">
<div id="event-one" class="counter event-ones"></div>

将最后执行的值返回给动态生成的每个 div

Returning last executed value to every div generated dynamically

javascript

jquery

html

dom

jquery-traversing