Move Through Object List

Question

<div id="team-name">{{teams[0].name}}</div> 
<button id="next">Next</button> 

當「下一個」按鈕被擊中時，我希望隊名是隊列中的下一個隊名，即0變成1？

我有一種感覺，我需要JS來做到這一點 - 但我不知道如何使用JS來做到這一點。

此外，該列表是從服務器生成的。

UPDATE

{{}}是模板系統的一部分 - 的Jinja2要精確。

團隊列表通過Jinja2傳遞到網頁 - 所以網頁可以訪問整個團隊列表 - 我希望這是有道理的。

class Team(db.Model): 
    __tablename__ = 'Team' 
    name = db.Column(db.String(21)) 
    matches_total = db.Column(db.Integer()) 
    matches_won = db.Column(db.Integer()) 
    matches_lost = db.Column(db.Integer()) 

Answer 1

做一個列表包含可用的名字作爲team_names和更新您的模板是這樣的：

<div id="team-name" data-index="0" data-entries="{{ team_names|tojson }}">{{teams[0].name}}</div> 
<button id="next">Next</button> 

在您使用的瓶，這似乎是這樣的情況下，它傳遞給你的render_template()電話：

team_names=[t.name for t in Team.query] 

然後你可以用下面的jQuery的片段做你想做什麼：

$('#next').on('click', function(e) { 
    e.preventDefault(); 
    var nameElem = $('#team-name'); 
    var entries = nameElem.data('entries'); 
    var index = (nameElem.data('index') + 1) % entries.length; 
    nameElem.text(entries[index]).data('index', index); 
}) 

注意：此答案假定列表不太大。