Cómo hacer esto en estilo jquery

Tengo este codigo:

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

I hide it using jquery with this:

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

And now I want now is to display a new label and new input that will look like this:

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

How can I do this in jquery style?

preguntado el 31 de enero de 12 a las 08:01

4 Respuestas

I would just include both as normal in the HTML, and then hide/show as needed:

<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>

y

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

CSS:

#verificationNoField{
    display:none;
}

Then call to use:

showVerificationNo();

Respondido el 31 de enero de 12 a las 12:01

$("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/

Respondido el 31 de enero de 12 a las 12:01

The easiest way will be to add an invisible element in your 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>

y entonces:

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

Alternatively you can also add a second label and hide/show it.

Respondido el 31 de enero de 12 a las 12:01

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

Respondido 23 Feb 12, 22:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.