按下提交按钮后隐藏 div - 不起作用答案

【问题标题】：Hiding div after submit button pressed - not working按下提交按钮后隐藏 div - 不起作用
【发布时间】：2019-05-04 11:57:13
【问题描述】：

我正在尝试创建一个加载页面，以便在按下搜索按钮后显示“加载”gif。 gif 显示得很好，但我希望在发生这种情况时其他所有内容都消失，所以只有 gif 显示在页面上。我已经阅读了很多关于这类事情的其他主题，到目前为止：

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，就不行了。

谁能解释一下？

【问题讨论】：

不清楚您要实现什么，但在测试您发布的代码后，单击提交按钮后所有元素都被隐藏。
你想隐藏什么？全部内容还是仅包含 starter-template 类的内容？您有重复的 ID。 ID 必须是唯一的。删除您的一个disappearing_div id。
谢谢两位，我更改了 id 名称并且成功了！

标签： javascript jquery html

【解决方案1】：

如果名称必须保持不变，请将 dissaearing_div id 更改为类。

【讨论】：