Question

我有一个页面，用户单击按钮提交要处理的数据，问题是这需要30到40秒的时间，因此我想防止用户再次单击该按钮，所以我进行了CSS加载div中的动画，并在js脚本标签中调用它，但是当我尝试运行js函数时，它不起作用，我什至尝试在控制台中运行它。

$(document).ready(function() {
  $('#q12').click(function() {
    $('#q11').show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="loading" id="q11" style="display:none">
  <div class="obj"></div>
  <div class="obj"></div>
  <div class="obj"></div>
  <div class="obj"></div>
  <div class="obj"></div>
  <div class="obj"></div>
  <div class="obj"></div>
<div class="obj"></div>
</div>

<a href="{% url 'patients:analyse_images' image.pk %}"
  class="btn btn-sm btn-outline-primary"
  id="q12">Analyse</a>

Answer 1

您想要这样的东西吗？

"scripts": {
    "dev": "node server.js",
    "build-server": "tsc --esModuleInterop server.ts",
    "build-next": "next build",
    "start": "NODE_ENV=production node server.js"
  }

document.querySelector('#q12').addEventListener('click', function(e) {
  // stop the click from triggering a route change
  e.preventDefault();
  // display the loader
  document.querySelector('#q11').style.display = 'block';
  // hide the "Analyse" element
  e.target.style.display = 'none';
})

.obj {
  width: 5px;
  height: 5px;
  background: gray;
  border-radius: 100%;
  margin: 2px;
  display: inline-block;
}

如果是，请阅读preventDefault method of JavaScript events。

如果您愿意，可以使用<div class="loading" id="q11" style="display:none"> <div class="obj"></div> <div class="obj"></div> <div class="obj"></div> </div> <a href="{% url 'patients:analyse_images' image.pk %}" class="btn btn-sm btn-outline-primary" id="q12">Analyse</a>在n秒后将用户重定向到某些路由。您想在上方的setTimeout回调函数中使用该setTimeout函数...

Answer 2

问题出在最后一行的标记中。删除href。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loading" id="q11" style="display:none">
          <div class="obj"></div>
          <div class="obj"></div>
          <div class="obj"></div>
          <div class="obj"></div>
          <div class="obj"></div>
          <div class="obj"></div>
          <div class="obj"></div>
          <div class="obj"></div>
    </div>

    <button id="q12">Analyse</button>

div CSS加载动画没有显示？

2 个答案: