如何将此javascript应用于jinja返回的每个div？

Question

我有一个Jinja标记，它返回一些数据库数据。我在for标记中添加了一些在某些div上工作的javascript。javascript代码仅适用于第一个div。

我使用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>
        <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 = "f1()" id="o" 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 = "f2()" id="o2" 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 %}

联署材料：

new fullpage("#fullpage", {
      sectionsColor: ['#ffb224', '#0798ec'],
      sectionSelector: '.vertical-scrolling',
      navigation: true,
      parallax: true,
    });
    var o = document.getElementById("o")
    var o2 = document.getElementById("o2")
    function f1() {
            o.style["background-color"] = "#978480";
            o2.style["background-color"] = "blue";
        }
    function f2() {
            o2.style["background-color"] = "#978480";
            o.style["background-color"] = "red";

        }

下面是用于fullPage.js的css：

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

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

我是一个乞丐，我发现它更容易使用内联css。谢谢你的帮助！

Answer 1

js正在命中id='o2‘，如果没有唯一的id，它不会到达下一个div，您可以通过使id=“o2{i}，其中我是wyr循环的增量，并向代码的其余部分添加逻辑来修复这个问题。