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元素，作为您演示的标记：

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

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

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

1 个答案: