我正在用django創建一個運動應用程序。我想顯示每場比賽的倒數列表。與Django循環中的多個JQuery倒計時
現在,我只有一個倒計時。我使用這個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>
「匹配」 是包含每場比賽的名單。 「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」日期時間進入了倒計時,以及如何將此倒計時插入循環中。
這裏是我當前的代碼:
<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>
謝謝。但是當我嘗試你的解決方案時,不會出現倒計時。 – JojoL
剛剛注意到'match_countdown'的div存在拼寫錯誤。我在Django模板過濾器中使用了雙引號,而單引號是需要的。現在試試。 – miki725
還是什麼都沒有。可能是我做得不好。當我將它粘貼到我的模板中時,是否需要更改代碼? – JojoL