Question

我正在制作一个html文件，其中有几个带有触发事件的附加按钮，在显示文本时会触发事件。问题是，单击任何一个按钮时，它仅显示与第一个按钮相关的文本。

<body>

</div>
{% if latest_question_list %}
    {% for questao in latest_question_list %}
        <p><input type="submit" onclick="myFunction()" class="greybutton" value="{{ questao.questao_texto }}"/></p>
        <div id="show" style="display: none">
        <div class="aligned">
            <div id="show2" style="display: none" >
                <div class="right">
                    {% for opcao in questao.opcao_set.all %}
                       <li style="background-color: red; color: white; border: 1px solid white">{{ opcao.opcao_texto }} --
                            {{ opcao.votos }}
                            voto{{ opcao.votos|pluralize }}</li>
                    {% endfor %}
                </div>
            </div>
        </div>
            <div class="aligned">
                <form action="{% url 'desporto:sondagens' %}"
                      method="post">
                    {% csrf_token %}
                    {% for opcao in questao.opcao_set.all %}
                        <input type="radio" name="opcao" id="opcao{{ forloop.counter }}" value="{{ opcao.id }}" />
                        <label for="opcao{{ forloop.counter }}"> {{ opcao.opcao_texto }} </label>
                        <br >
                    {% endfor %}
                    <p>  <input type="submit" value="Votar" class="rwbutton"> </p>
                </form>
                <p>  <input type="submit" value="Ver resultados" onclick="toogle()" class="rwbutton" /></p>
            </div>
        </div>
    {% endfor %}

{% else %}
    <div class="aligned">
        <p>Nao ha sondagens disponiveis.</p>
    </div>

{% endif %}
<br>
<div id="footer"></div>
</body>
</html>

js个文件：

function toogle() {
  var x = document.getElementById("show2");

  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function myFunction() {
  var x = document.getElementById("show");

  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

它应该在每个按钮上显示每个文本。反正这样做吗？

Answer 1

问题是您有许多具有相同ID（show）的元素。尝试为每个对象都具有唯一的ID（例如show_0，show_1，show_2，...），然后将索引传递给myFunction()，以便它知道要获取这些元素中的哪个。

因此，您可以：

<p><input type="submit" onclick="myFunction({{forloop.counter0}})" class="greybutton" value="{{ questao.questao_texto }}"/></p>
 <div id="show_{{forloop.counter0}}" style="display: none">

然后在您的JS中：

function myFunction(index) {
  var x = document.getElementById("show_" + index);
  //...
}

“如何修复激活循环内所有按钮的onclick（）

1 个答案: