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

「次へ」ボタンが押されたとき、チーム名をリストの次のチーム名にしたいです。つまり、0 が 1 になりますか?

これを行うにはJSが必要だと感じていますが、JSを使用してこれを行う方法がわかりません。

また、リストはサーバーから生成されます。

アップデート

{{ }} はテンプレート システムの一部です。正確には Jinja2 です。

チーム リストは Jinja2 を介して Web ページに渡されるため、Web ページはチーム リスト全体にアクセスできます。

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 に答える