如何做到這一點使用jQuery風格

Question

我有這樣的代碼：

<p><label for="mobtel">Enter mobile no.:</label><br /> 
<input id="mobtel" type="text" name="mobtel"/></p> 

我隱藏它使用jQuery本：

$("label[for=mobtel],#mobtel").hide(); 

現在我現在想要的是顯示一個新的標籤，新輸入，看起來像這樣：

<p><label for="mobtel">Enter verification no.:</label><br /> 
<input id="verification_no" type="text" name="verification_no"/></p> 

我該如何做到這一點在jquery風格？

Answer 1

我只想包括如HTML正常，然後根據需要隱藏/顯示：

<p id="mobtelField"> 
    <label for="mobtel">Enter mobile no.:</label><br /> 
    <input id="mobtel" type="text" name="mobtel"/> 
</p> 
<p id="verificationNoField"> 
    <label for="verification_no">Enter verification no.:</label><br /> 
    <input id="verification_no" type="text" name="verification_no"/> 
</p> 

和

function showVerificationNo(){ 
    $('#mobtelField').hide(); 
    $('#verificationNoField').show(); 
} 
function showMobtel(){ 
    $('#verificationNoField').hide(); 
    $('#mobtelField').show(); 
} 

CSS：

#verificationNoField{ 
    display:none; 
} 

然後打電話用途：

showVerificationNo(); 

Answer 2

$("p").append('<label for="mobtel">Enter verification no.:</label><br /> 
<input id="verification_no" type="text" name="verification_no"/>'); 

Answer 3

$("body").append('<p><label for="mobtel">Enter verification no.:</label><br /> 
<input id="verification_no" type="text" name="verification_no"/></p>'); 

http://jsfiddle.net/K89ZU/1/

Answer 4

最簡單的方法將是在你的HTML添加一個不可見的元素：

<p><label for="mobtel">Enter mobile no.:</label><br /> 
<input id="mobtel" type="text" name="mobtel"/></p> 
<input id="verification_no" type="text" name="verification_no" style="display:none;"/></p> 

然後：

$("#icatmobtel").hide(); 
$("#verifion_no").show(); 
$("label[for=mobtel]").text("Enter verification no.:"); 
$("label[for=mobtel]").attr("for", "verifion_no"); 

另外，您還可以添加第二個標籤並隱藏/展示下。