javascript - div CSS 加载动画没有显示？

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

你想要这样的东西吗？

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;
}

<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>

如果是这样，请继续阅读 preventDefault method of JavaScript events .

如果您愿意，可以使用 setTimeout 在 n 秒后将用户重定向到某个路线。您想在上面的 click 回调函数中使用 setTimeout 函数...