文章/答案/技术大牛

发布

社区首页 >问答首页 >使用Django在循环中执行多个JQuery倒计时

问使用Django在循环中执行多个JQuery倒计时
EN

Stack Overflow用户

提问于 2012-10-15 19:20:32

回答 2查看 491关注 0票数 1

我正在用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“是我的对象"match”的DateTime

我的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>

django

javascript

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-10-15 20:35:05

类似于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说明了解决方案。

票数 3

Stack Overflow用户

发布于 2012-10-15 20:20:51

WHenever你需要在许多需要每个实例不同数据的元素上调用一个插件，通常最简单的方法是循环遍历所涉及的元素，并从循环中调用每个实例。

像这样的东西应该很容易实现：

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 %}

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12894538

复制

相似问题

问使用Django在循环中执行多个JQuery倒计时
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Django在循环中执行多个JQuery倒计时EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Django在循环中执行多个JQuery倒计时
EN