按下提交按钮后隐藏div-不起作用 [英] Hiding div after submit button pressed - not working
问题描述
我正在尝试创建一个加载页面，以便在按下搜索按钮后显示加载中" gif. gif显示的很好，但是我希望其他所有内容在这种情况下消失，因此gif仅显示在页面上.我已经阅读了有关此类事物的许多其他主题，到目前为止，有:
I am trying to create a loading page so that a 'loading' gif shows up after pressing the search button. The gif is showing up just fine but I want everything else to disappear when this happens so just the gif shows on the page. I have read a bunch of the other topics on this type of thing and so far have:
html:
<body>
<img src="{% static 'images/333.GIF' %}" style="display: none;" id="animated-gif"/>
<div class="hover_background" id="disappearing_div">
<div class="starter-template" id="disappearing_div">
<h1>Heading</h1>
<p class="lead">paragraph</p>
</div>
<div class="row search">
<div class="col-sm-8 col-sm-offset-2">
<form id="search-id" method="GET">
<button type="submit" name="submit" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Search
</button>
</form>
</div>
</div>
</body>
脚本:
<script>
$('#search-id').submit(function() {
$('#animated-gif').show();
document.body.style.background = 'white';
document.getElementById("disappearing_div").style.display = 'none';
});
</script>
它似乎适用于我的导航栏，它位于base.html(一个单独的html文件中，我已将其阻止/扩展到该文件.在base.html中，我的导航栏具有id ="disappearing_div"，似乎有效，但是对于上面html代码中的div来说，它不起作用.
It seems to be working for my navbar, which I have in base.html (a separate html file that I have block/extended to this file. In base.html I have id="disappearing_div" for the navbar and this seems to work. But for the divs in the html code above, it doesn't work.
有人可以解释吗?
推荐答案
如果名称必须保持相同，则将dissapearing_div id更改为类.
Change the dissapearing_div ids to classes if the names must remain the same.
这篇关于按下提交按钮后隐藏div-不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
