如何解决Otree模板中Next按钮显示但无法跳转至下一页的问题？

嘿，我看你是想实现分页显示每张图片，点击Next按钮跳转到下一页展示下一张图的效果，但当前代码有个明显问题：你在同一个Otree页面里放了好多个{% next_button %}，而且所有图片都一次性渲染出来了——Otree每个页面默认只能有一个表单提交按钮，多按钮会让表单逻辑混乱，自然没法按你想要的方式跳转。

给你两个靠谱的解决方案，按需选择就行：

方案一：用Otree多页面实现（推荐，符合框架设计规范） #

Otree的核心逻辑就是基于页面流程的，所以最规范的做法是把每张图片做成单独的页面。

1. 修改models.py，添加对应页面类

from otree.api import *

class Constants(BaseConstants):
    name_in_url = 'verde'
    players_per_group = None
    num_rounds = 1

class Subsession(BaseSubsession):
    pass

class Group(BaseGroup):
    pass

class Player(BasePlayer):
    pass

# 每个页面对应一张图片
class ImagePage1(Page):
    pass

class ImagePage2(Page):
    pass

class ImagePage3(Page):
    pass

class ImagePage4(Page):
    pass

# 定义页面跳转顺序
page_sequence = [ImagePage1, ImagePage2, ImagePage3, ImagePage4]

2. 为每个页面创建单独的模板文件

比如ImagePage1.html：

{% load otree static %}
{% block title %} Emivasa {% endblock title %}
{% block content %}
<div class="card bg-light m-3">
  <div class="card-body">
    <img src="{% static 'verde/1.PNG' %}" />
    {% next_button %}
  </div>
</div>
{% endblock %}

ImagePage2.html只需把图片路径改成verde/2.PNG，以此类推。

这样用户每点击一次Next按钮，就会自动跳转到下一个Otree页面，展示对应的下一张图片，完全匹配你的需求。

方案二：单页面用JavaScript切换图片（适合不想新增页面的轻量化场景） #

如果不想创建多个页面，可以用JS在同一个页面内切换图片显示，最后一张图再展示真实的next_button提交表单。

修改后的模板代码如下：

{% load otree static %}
{% load user_agents %}
{% block title %} Emivasa {% endblock title %}
{% block content %}
<div class="card bg-light m-3">
  <div class="card-body">
    <!-- 所有图片，默认只显示第一张 -->
    <img id="img-1" src="{% static 'verde/1.PNG' %}" style="display: block;" />
    <img id="img-2" src="{% static 'verde/2.PNG' %}" style="display: none;" />
    <img id="img-3" src="{% static 'verde/3.PNG' %}" style="display: none;" />
    <img id="img-4" src="{% static 'verde/4.PNG' %}" style="display: none;" />

    <!-- 自定义切换按钮，最后一张图时替换成真实的next按钮 -->
    <button id="switch-btn" class="btn btn-primary">Next</button>
    {% next_button id="final-next" style="display: none;" %}
  </div>
</div>

<script>
let currentIndex = 1;
const totalImgs = 4;

document.getElementById('switch-btn').addEventListener('click', function() {
    // 隐藏当前图片
    document.getElementById(`img-${currentIndex}`).style.display = 'none';
    currentIndex++;
    
    // 显示下一张图片
    if (currentIndex <= totalImgs) {
        document.getElementById(`img-${currentIndex}`).style.display = 'block';
    }
    
    // 到最后一张图时，隐藏自定义按钮，显示真实的next按钮
    if (currentIndex === totalImgs) {
        this.style.display = 'none';
        document.getElementById('final-next').style.display = 'block';
    }
});
</script>
{% endblock %}

额外注意事项 #

• 确保你的static/verde/目录下确实存在1.PNG到4.PNG这些图片文件，路径不要写错。
• 方案一扩展性更好，如果之后需要在每个页面添加交互或记录数据会更方便；方案二更轻量化，适合简单的图片浏览场景。

内容的提问来源于stack exchange，提问作者Irtaza Ali Ajmal