Question

我正在使用Flask框架来建立信息检索系统。

当我点击一个名字时，我正试图让一个div弹出。现在我循环浏览一个名单列表并将它们作为按钮彼此相邻输出。但是，当我点击一个按钮时，我想从该按钮下拉div。但是，每次单击该按钮，它都会刷新页面并删除所有输出的名称。现在甚至没有调用myDiv函数。如何在不按下所有其他输出的情况下将div显示在按下按钮下方？

// actions.js
function myDiv(name) {
    var x = document.getElementById(tag);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

<form class="form-inline" action="">
  {% if output %}
  <h2>Top names to use</h2>
    {% for name in output %}
    <div class="output-container">
      <button onclick="myDiv({{name}})" id={{name}} class="btn btn-info">{{name}}</button>
     </div>
    {% endfor %}
  {% endif %}
</form>
<script type="text/javascript" src="/static/js/actions.js"></script>

Answer 1

默认情况下，button的类型为submit。您必须隐式地将其更改为button：

<button type="button" onclick="myDiv({{name}})" id={{name}} class="btn btn-info">{{name}}</button>

Answer 2

按钮的按钮类型需要设置按钮

// action.js
function myDiv(name) {
    var x = document.getElementById(tag);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

<form class="form-inline" action="">
  {% if output %}
  <h2>Top names to use</h2>
    {% for name in output %}
    <div class="output-container">
      <button type="button" onclick="myDiv({{name}})" id={{name}} class="btn btn-info">{{name}}</button>
     </div>
    {% endfor %}
  {% endif %}
</form>
<script type="text/javascript" src="/static/js/actions.js"></script>

Answer 3

使用JQuery兄弟。如果您想在此处了解有关Jquery的更多信息 - https://jquery.com/

通过Jquery的解决方案非常简单。

$("#your_button_id").click(function(){

   $("#your_div_id").hide(); 
   $("#your_div_id").show();  

   /*Whatever you want to do you can do here.*/
})

希望它有用。

单击按钮而不刷新整个页面

3 个答案: