我的网站有一个注册表,当我的用户专注于输入时,我试图向他们显示不同的隐藏 td 作为提示...
我已经尝试过closest()、next()、sibling()、hasClass(),但无法让这个东西工作...任何帮助都是值得赞赏的。这是jsfiddle http://jsfiddle.net/88JPU/1/
<style type="text/css" rel="stylesheet">
.focusField{
border:solid 2px #333;
background:lightyellow;
}
.idleField{
background:#fff;
border: solid 1px #DFDFDF;
}
input.text_field {
-moz-border-radius: 5px 5px 5px 5px;
border: 1px solid #DDDDDD;
font-size: 14px;
margin: 0;
padding: 8px;
width: 200px;
}
input.text_field.with_box {
-moz-border-radius-bottomright: 0;
-moz-border-radius-topright: 0;
}
.col-help {
background:#f7f7f7;
border:1px solid #ccc;
font-size:13px;
font-family:Tahoma, Geneva, sans-serif
}
</style>
<script>
$(function() {
$('.col-help').hide();
$('input[type="text"]').focus(function () {
$(this).removeClass("idleField").addClass("focusField");
$(this).closest('td').hasClass('col-help').show();
});
});
</script>
<table>
<tbody>
<tr>
<td>Full Name:</td>
<td><input type="text" class="text_field name" id="name"/></td>
<td class="col-help name" width="200 >what is your name</td>
<tr>
<td>Password:</td><td><input type="text" class="text_field" id="password"/></td>
<td class="col-help">Type a strong password...</td>
</tr>
</tr>
</tbody>
</table>
最佳答案
Try this :
$(this).parent().next('td.col-help').show();
此外,您还错误地嵌套了 tr
标记。
顺便说一下,如果您正在进行一些表单验证,您可能需要检查 jquery.validate plugin而不是进行这种手动工作。
关于javascript - jQuery 在焦点上一次显示一个 TD,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5336049/