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代码段来执行您想要的操作：

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

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

移动对象列表

1 个答案: