我試圖隱藏一個元素，當頁面打開，然後顯示一個按鈕被點擊時

我試圖隱藏一個元素，當頁面打開，然後顯示一個按鈕被點擊，但它沒有顯示該元素。我想用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>

來源

2012-11-30 Phil Pilon

嗯......你錯過了一個開始''標籤... – ahren

把腳本等HTML文檔的末尾或者把它包在：

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

來源

2012-11-30 01:22:31

試試這個：

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

$("#extraForm").hide()不需要在函數中 - 它在頁面加載時運行。

來源

2012-11-30 01:22:50 irrelephant

它始終是更好地使用CSS來隱藏你不需要在頁面加載元素

#extraForm { display: none }

您的腳本不工作，因爲你嘗試將事件偵聽器附加到沒有按」元素當腳本運行時仍然存在。要修復它你的jQuery需要等待DOM做好準備：

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

DEMO

來源

2012-11-30 01:25:12

既然你需要的形式被隱藏時，你可以使用CSS頁面加載到隱藏它。

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

當你需要顯示的形式，簡單地使用
$('#extraForm').show();

Here is a working demo

不要忘了，包括在你的代碼jQuery庫。

來源

2012-11-30 01:26:49

jquery加載非常感謝您的答覆 –

我試圖隱藏一個元素，當頁面打開，然後顯示一個按鈕被點擊時

回答

相關問題