0 
<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())
4

1 回答 1

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

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

于 2012-12-30T22:18:22.193 回答