在 jquery 中添加类到标签表单

Question

我正在尝试编辑wordpress联系表单以对其进行自定义。 我已经添加了为我的标签使用占位符的功能。 所以现在我希望为每个类添加一个对应于它们的"for="属性的类，以隐藏标签的文本。

有一种方法可以在jquery中做到这一点？

这是我的jquery：

jQuery(document).ready(function(){
jQuery('#user_login').attr('placeholder', 'Name');
jQuery('#user_email').attr('placeholder', 'Email');
jQuery('#user_pass').attr('placeholder', 'Password');         
});

和我的网页：

<form name="loginform" id="loginform" action="http://localhost/patrick/waf" method="post" style="position: static; left: 0px;">
<p>
<label for="user_login">Nom d’utilisateur ou adresse e-mail<br>
<input type="text" name="log" id="user_login" aria-describedby="login_error" class="input" value="" size="20" placeholder="Name"></label>
</p>
<p>
<label for="user_pass">Mot de passe<br>
<input type="password" name="pwd" id="user_pass" aria-describedby="login_error" class="input" value="" size="20" placeholder="Password"></label>
</p>
<div>
<div id="areyouhuman">
<label>
<span class="checkme" role="checkbox" tabindex="0" aria-checked="false"></span>
<i class="checkme">Oui, je suis un humain.</i>
</label>
</div>
<div id="msg" class="hidden">Session expirée, merci de réessayer.</div>
<input type="hidden" name="captcha_key" id="captcha_key" value="">
</div>
<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" checked="checked"> Se souvenir de moi</label></p>
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Se connecter">
<input type="hidden" name="redirect_to" value="http://localhost/patrick/wp-admin/">
<input type="hidden" name="testcookie" value="1">
</p>
</form>

Answer 1

使用属性选择器。

$("label[for=user_login],label[for=user_email],label[for=user_pass]")
.contents().filter(function(){ return this.nodeType == 3; }).first().replaceWith("");

请参阅如何在不更改其子元素的情况下更改元素的文本？以了解其工作原理的说明。这种复杂的代码是必要的，因为<label>元素环绕着输入，所以你不能只做.text("")因为这也会删除输入。

您也可以完全摆脱标签unwrap().

jQuery(document).ready(function(){
jQuery('#user_login').attr('placeholder', 'Name').unwrap();
jQuery('#user_email').attr('placeholder', 'Email').unwrap();
jQuery('#user_pass').attr('placeholder', 'Password').unwrap();         
});