Question

我尝试在这个网站上四处寻找，但之前的答案都没有帮助解决这个问题。我有一个包含标题和表单的div。

基本上我想要提交表单以隐藏div中的所有内容，所以我一直试图隐藏div。但不幸的是，我所做的就是完成这项工作。这是我的代码：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("#shirtForm").submit(function(e){
      $("#question").hide();
    });
  });
</script>
</head>
<body>
  <div id="question">
      <h3>What colour shirt was Eamon wearing today?</h3>
      <form id="shirtForm" onsubmit="shirtValidator()">
        <input type="radio" name="shirtColour" id="redShirt"> Red <br>
        <input type="radio" name="shirtColour" id="blueShirt"> Blue <br>
        <input type="radio" name="shirtColour" id="yellowShirt"> Yellow <br>
        <input type="radio" name="shirtColour" id="noShirt"> He isn't wearing a shirt <br>
        <input type="submit" value="Enter" onclick="shirtValidator()">
      </form>
  </div>

</body>
</html>

提前感谢任何帮助。

Answer 1

问题不在于您的代码，而是在运行，但事情发生的速度太快，您无法注意到它们。

hide（）函数正常工作，可能是你的DOM在提交表单后重新加载，而hide（）发生的速度很快，只有瞬间才能看到效果。

试试这个：

<script>
$(document).ready(function(){
    $("#shirtForm").submit(function(e){
      e.preventDefault()
      $("#question").hide();
      return false;
    });
  });
</script>

它对我有用。

我找到了使用隐藏here的一个很酷的例子。

Answer 2

在您的代码中添加e.preventDefault（）：

$(document).ready(function(){
    $("#shirtForm").submit(function(e){
      e.preventDefault();
      $("#question").hide();
    });
});

e.preventDefault（）方法停止发生元素的默认操作。

例如：

阻止提交按钮提交表单
阻止链接跟踪网址

Answer 3

$(document).ready(function(){
    $("#shirtForm").submit(function(e){
      e.preventDefault()
      $("#question").hide();
    });
  });

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <div id="question">
      <h3>What colour shirt was Eamon wearing today?</h3>
      <form id="shirtForm">
        <input type="radio" name="shirtColour" id="redShirt"> Red <br>
        <input type="radio" name="shirtColour" id="blueShirt"> Blue <br>
        <input type="radio" name="shirtColour" id="yellowShirt"> Yellow <br>
        <input type="radio" name="shirtColour" id="noShirt"> He isn't wearing a shirt <br>
        <input type="submit" value="Enter">
      </form>
  </div>

</body>
</html>

jQuery .hide（）方法不隐藏div

3 个答案: