Question

我有一个我的网站的注册表格，我正在尝试向用户展示不同的隐藏td作为提示，当他们专注于输入时...

我已经尝试过最近的（），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>

Answer 1

Try this：

$(this).parent().next('td.col-help').show();

您还错误地嵌套了tr个标签。

顺便说一句，如果您正在进行表格验证，您可能需要查看jquery.validate plugin而不是完成本手册。

Answer 2

以下是一个工作示例：http://jsfiddle.net/ThiefMaster/MLkDb/（@ Darin的回答在离开现场时不会隐藏帮助。）

但是，您可以使用blur事件让它变得更加容易..那么您不必搜索之前选择的元素：http://jsfiddle.net/ThiefMaster/MLkDb/1

最后但并非最不重要的是，您还可以使用纯CSS作为焦点突出显示，并仅使用JS来显示帮助框（通过CSS也可以进行一些更改）：http://jsfiddle.net/ThiefMaster/MLkDb/2/ < / p>

为什么您的代码不起作用的一些评论：

未公开的报价 - ＆gt;打破了很多代码，因为它被认为是标记参数的一部分
.hasClass()返回一个布尔值 - 它不会过滤元素列表。在您的情况下，您需要使用选择器。
.closest()检查元素本身及其父元素。不是该元素的子女/兄弟姐妹或其父母。
您需要将. focusField CSS规则放在.text_field规则之后，或者将其属性设为!important。否则，它们的优先级低于.text_field中后来定义的属性。

jQuery在焦点上一次显示一个TD

2 个答案: