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

【问题标题】：Clicking on button without refreshing the whole page单击按钮而不刷新整个页面
【发布时间】：2018-04-23 04:07:27
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： javascript jquery html css flask

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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.*/
})

希望对您有所帮助。

【讨论】：