2012-10-15 33 views
1

我正在用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> 

回答

3

類似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其示出了該解決方案。

+0

謝謝。但是當我嘗試你的解決方案時,不會出現倒計時。 – JojoL

+0

剛剛注意到'match_countdown'的div存在拼寫錯誤。我在Django模板過濾器中使用了雙引號,而單引號是需要的。現在試試。 – miki725

+0

還是什麼都沒有。可能是我做得不好。當我將它粘貼到我的模板中時,是否需要更改代碼? – JojoL

2

每當你需要調用多種因素,一個插件,需要不同的數據對於每個實例通常最容易遍歷所涉及的元素並調用每個inst從循環內切換。

像這樣的事情應該是很容易實現:

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}); 
    }); 
}) 
+0

好的,非常感謝,我現在每場比賽都有倒計時。但他們堅持到0.所以我該怎麼做,以便他們去我的比賽的「真正的開始」?我很抱歉,我是編程新手,現在我真的有想法如何去做。 – JojoL

+0

試試我的解決方案(與這個答案類似,當我輸入時,@charlierl發佈了他的答案)。它應該正確地將日期解析到'Date'實例中,所以應該可以工作。 – miki725

+0

您必須將格式正確的日期傳遞給插件。按照插件文檔。你可以在你的django服務器代碼中格式化日期,或者用javascript解析它。有很多關於如何操作任何語言的日期的教程 – charlietfl