Question

我试图在页面打开时隐藏元素，然后在单击按钮时显示，但它不显示元素。我希望隐藏id extraForm的表单直到按下按钮

<!DOCTYPE html>
<head>

<script src="Javascripts/jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#extraForm").hide()
});
$('#showForm').click(function(){
$('#extraForm').show();
});
</script>
<link rel='stylesheet' href='website.css'>
</head>
<body>
<form action="submit.php" method="post">
<table> <table border="1"> <tr>
<tr> <td> First Name:     </td> <td> <input type="text" name="firstName">  </td> </tr> 
<tr> <td> Last Name:      </td> <td> <input type="text" name="lastName">   </td> </tr>
<tr> <td> Dorm Name:      </td> <td> <input type="text" name="dormName">   </td> </tr>
<tr> <td> Room Number:    </td> <td> <input type="text" name="roomNumber"> </td> </tr>

<tr> <td> Pizza Type:     </td> <td> <input type="radio" name="pizzaType" value="Cheese">       
Cheese
<input type="radio" name="pizzaType" value="Pepperoni"> Pepperoni <br>
<input type="radio" name="pizzaType" value="Buffalo Chicken"> Buffalo Chicken </td>
<tr> <td> Number of Pizza's:  <td>   <input type="text" name="pizzaNumber"> </td> </tr>
<tr> <td> </td> <td>  <input type="submit"> </tr> </td>

<table> <table border="1" id="extraForm">
<tr> <td> <input type="radio" name="pizzaType" value="Cheese"> Cheese</td> </tr>
<tr> <td> <input type="radio" name="pizzaType" value="Buffalo Chicken"> Buffalo Chicken      
</td> </tr>
<tr> <td> <input type="radio" name="pizzaType" value="Pepperoni"> Pepperoni</td> </tr>
<input type="button" name="showForm" value="Add Pizza" id="showForm">
</table>


</table>

</form>

</body>
</html>

Answer 1

最好使用CSS隐藏页面加载时不需要的元素

#extraForm { display: none }

您的脚本不起作用，因为您尝试将事件侦听器附加到脚本运行时尚不存在的元素。要修复它，你的jQuery需要等待DOM准备好了：

$(function() {
    $('#showForm').click(function() {
        $('#extraForm').show();
    });
});

DEMO

Answer 2

由于您需要在页面加载时隐藏表单，因此可以使用CSS来隐藏它。

<table border="1" id="extraForm" style="display:none">

当您需要显示表单时，只需使用
$('#extraForm').show();

即可

Here is a working demo

不要忘记在代码中包含jquery库。

Answer 3

将脚本放在HTML文档的末尾或将其包装在：

$(document).ready(function(){
  // place code here
});

Answer 4

试试这个：

<script type="text/javascript">
    $(document).ready(function () {
        $("#extraForm").hide()
        $('#showForm').click(function(){
            $('#extraForm').show();
        });
    });
</script>

$("#extraForm").hide()不需要在函数中 - 它在页面加载时运行。

我试图在页面打开时隐藏元素，然后在单击按钮时显示

4 个答案: