在对象列表中移动

Question

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

当点击“下一个”按钮时，我希望团队名称成为列表中的下一个团队名称，即 0 变为 1？

我觉得我需要 JS 来做这件事 - 但我不确定我将如何使用 JS 来做这件事。

此外，列表是从服务器生成的。

更新

{{ }} 是模板系统的一部分 - 准确地说是 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 sn -p 来做你想做的事：

$('#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);
})

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