Question

我正在用django创建一个运动应用程序。我想显示每场比赛倒计时的比赛列表。

目前，我只有一次倒计时。我使用这个Jquery倒计时：http://keith-wood.name/countdown.html（进入新的一年）。我有一个循环来显示我的比赛。所以问题是如何将倒计时插入循环并使其转到我的对象的DateTime“匹配”？

这是我的模板：

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style type="text/css">@import "/Users/marc-a   antoine.lacroix/Desktop/Jquery/jquery.countdown.package-1.6.0/jquery.countdown.css";</style>

<script type="text/javascript" src="http://keith-wood.name/js/jquery.countdown.js">    </script>
<script language="javascript">

$(document).ready(function(){

var newYear = new Date(); 
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1); 
$('#defaultCountdown').countdown({until: newYear}); 

});
</script>

</head>
<body>

<div style="float:left">
{% for match in matches %}
<div>    
    <p>{{ match }}</p>
    <p> {{match.real_start}} <p>
    <a href="{{ match.get_absolute_url_grille }}">Go</a>
   </div>
{% endfor %}
</div>


<div id="defaultCountdown"> </div>


</body>

“matches”是包含每个匹配项的列表。 “real_start”是我的对象“匹配”的日期时间

我的views.py很简单：

 def page(request):
     matches = Match.live_matches.all()

     return render_to_response('myhtml.html', {'matches': matches}, context_instance=RequestContext(request))

所以我不知道如何将我的“real_start”DateTime导入倒计时以及如何将此倒计时插入循环中。

这是我目前的代码：

<script language="javascript">


  $(function(){
  $('.match_wrap').each(function(){
   var match_start=$(this).data('match_start');      
   $(this).find('.matchTimer').countdown({until: match_start});
  });
  })
</script>

</head>
<body>

 <div style="float:left">
 {% for match in matches %}
 </br></br>
 <div class="match_wrap" data-match_start="{{ match.real_start|date:"M j, Y" }}">     
    <p>{{ match }}</p>
    <p> {{match.real_start}} <p>
    <div>
        <ul>
        {% for team in match.teams %}
            <li>
                <img src="{{ team.logo.url }}">
            </li>
        {% endfor %}
        </ul>
    </div>
    <a href="{{ match.get_absolute_url_grille }}">Go</a>
    <div class="matchTimer"> </div>
    </div>
{% endfor %}
</div>
</br></br>

我也尝试过：

 <head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://keith-wood.name/js/jquery.countdown.js"></script>


 <script language="javascript">


  $('.match_countdown').each(function() {
  var self = $(this),
    date_string = self.attr('data-date'),
    date = new Date.parse(date_string);
  self.countdown({until: date});
});
</script>

</head>
<body>

<div style="float:left">
{% for match in matches %}
</br></br>
<div class="match_countdown" data-date="{{ match.real_start|date:'M j, Y' }}"></div>  
    <p>{{ match }}</p>
    <p> {{match.real_start}} <p>
    <div>
        <ul>
        {% for team in match.teams %}
            <li>
                <img src="{{ team.logo.url }}">
            </li>
        {% endfor %}
        </ul>
    </div>
    <a href="{{ match.get_absolute_url_grille }}">Go</a>
</div>
{% endfor %}
</div>

Answer 1

与charlietfl的答案类似，但js解析了正确的日期。

{# template #}
{% for match in matches %}
    <div>    
        <p>{{ match }}</p>
        <p> {{match.real_start}} <p>
        <a href="{{ match.get_absolute_url_grille }}">Go</a>
        <div class="match_countdown" data-date="{{ match.real_start|date:'M j, Y' }}"></div>
    </div>
{% endfor %}

然后是js：

$('.match_countdown').each(function() {
    var self = $(this),
        date_string = self.attr('data-date'),
        date = new Date(date_string);
    self.countdown({until: date});
});

这里（http://jsfiddle.net/miki725/MQcYw/1/）js jsfiddle说明了解决方案。

Answer 2

无论何时需要在许多元素上调用插件，每个实例需要不同的数据，通常最容易遍历所涉及的元素，并在循环中调用每个实例。

这样的事情应该很容易实现：

HTML

{% for match in matches %}
<div class="match_wrap" data-match_start="{{match.startFormattedToCountDownPlugin}}">    
    <p>{{ match }}</p>
    <p> {{match.real_start}} <p>
    <a href="{{ match.get_absolute_url_grille }}">Go</a>
   </div>
   <div class="matchTimer"> </div>
</div>
{% endfor %}

JS

$(function(){
   $('.match_wrap').each(function(){
      var match_start=new Date.parse($(this).data('match_start')); 
       $(this).find('.matchTimer').countdown({until: match_start});
   });
})

使用Django循环中的多个JQuery倒计时

2 个答案: