如何让JavaScript作用于Jinja循环生成的所有div？

问题根源 #

1. HTML中id必须是唯一标识，你在Jinja循环里重复使用id="o"和id="o2"，导致document.getElementById()只会返回第一个匹配的元素，后续选项的点击事件自然只会修改第一个div的样式。
2. 原有的f1()、f2()函数绑定了固定的元素变量，无法适配循环生成的多组选项。

解决方案 #

修改HTML结构（替换重复id为class），同时改写JavaScript函数实现通用的选项点击逻辑，保留fullPage.js的全屏滚动功能：

修改后的HTML代码

<div id="fullpage">
    <div class="vertical-scrolling">
        <h1 style="color: #fff; text-align: center; font-size: 10vw;">Would You Rather</h1>
        <h2 style="text-align:center">Scroll down...</h2>
    </div>

{% for wyr in wyr %}
    <div class="vertical-scrolling">
        <div class="option-group">
            <h1 style="text-align:center; color:white;">{{ wyr.title }}</h1>
            <br>
            <h3><a href="/feed" style="text-decoration:none; color:black"><-Go back home</a></h3>
            <br><br><br><br><br>

            <div onclick="selectOption(this, 'option1')" class="option option1" style="padding-top:5%; padding-bottom:5%; text-align:center; background:red; color:white;height:10%">
                <h2><a>{{ wyr.option1 }}</a></h2>
            </div>
            <h2 style="text-align:center; background-color:white">or...</h2>
            <div onclick="selectOption(this, 'option2')" class="option option2" style=" padding-top:5%; padding-bottom:5%;text-decoration:none;text-align:center; background:blue; color:white;">
                <label><h2>{{ wyr.option2 }}</h2></label>
            </div>
        </div>
    </div>
{% endfor %}
</div>

修改后的JavaScript代码

new fullpage("#fullpage", {
    sectionsColor: ['#ffb224', '#0798ec'],
    sectionSelector: '.vertical-scrolling',
    navigation: true,
    parallax: true,
});

function selectOption(element, selectedType) {
    // 找到当前选项所在的分组容器
    const group = element.closest('.option-group');
    // 获取分组内的两个选项
    const option1 = group.querySelector('.option1');
    const option2 = group.querySelector('.option2');

    // 根据点击的选项修改对应样式
    if (selectedType === 'option1') {
        option1.style.backgroundColor = "#978480";
        option2.style.backgroundColor = "blue";
    } else {
        option2.style.backgroundColor = "#978480";
        option1.style.backgroundColor = "red";
    }
}

CSS代码（保持不变）

* {
  padding: 0;
  margin: 0px;
  font-family: 'Josefin Sans', sans-serif;
}

div#fp-nav a span {
    background: #fff !important;
}

修改说明 #

1. 把重复的id替换为class（option1/option2），class允许重复使用，适合循环生成的元素。
2. 给每组选项添加父容器option-group，用来关联同组的两个选项，确保点击时只修改当前组的样式。
3. 改写点击函数为通用的selectOption，通过this获取当前点击的元素，再通过closest()和querySelector()定位到同组的另一个选项，实现每组独立的样式切换逻辑。

内容的提问来源于stack exchange，提问作者CyberV14d