Question

我正在使用注册表单中的表格，并希望在输入标识<div class="collegeInfo">被集中时显示"profile_higher_ed"中的表格行。我在这里找到了类似问题的一些答案，如this one。但是当我调整jQuery时，当输入未被聚焦时，它并没有隐藏表行。

以下是我的表单生成的HTML：

<tr>
  <td class="label"><label for="profile_higher_ed">College:</label></td>
  <td>
    <input id="profile_higher_ed" name="profile[higher_ed]" size="32" type="text" />
  </td>
</tr>
<div class="collegeInfo">
<tr>
  <td class="label"><label for="profile_major">Major:</label></td>
  <td>
    <input id="profile_major" name="profile[major]" size="32" type="text" />
  </td>
</tr>
<tr>
  <td class="label"><label for="profile_major">Grad Year:</label></td>
  <td class="select">
    <select id="date_year" name="date[year]">
      ...
      <option value="2011">2011</option>
    </select>
  </td>
</tr>
</div>

这是我改编的jQuery：

$("#profile_higher_ed").focusin(function() {
    $("div.collegeInfo").show();
}).focusout(function () {
    $("div.collegeInfo").hide();
});

我在<tr>中使用<div>的问题是什么？

Answer 1

是的，中间带有<div>元素的<tr>是个问题（它无效）。我为你做了一个JS小提琴。如果我正确理解了这个问题，那就是你想要的：http://jsfiddle.net/cJRrx/5/

我在两个<tr>元素上放了一个类，并将你的jQuery改为

$(document).ready(function(){
    $("tr.collegeInfo").hide();
});
$("#profile_higher_ed").focus(function() {
    $("tr.collegeInfo").show();
});

修改：您也可以尝试使用

$("#profile_higher_ed").live('focus', function() { $("tr.collegeInfo").show(); });

或

$("#profile_higher_ed").focusin(function() { $("tr.collegeInfo").show(); });

作为焦点的替代方案，您可以使用.click()执行相同的操作。但是，由于您正在使用表单，如果用户选中它，这将没有多大帮助。

编辑2 ：正如评论中指出的那样，现在最好使用$("selector").on('focus', callback);，因为jQuery中不推荐使用live()。

Answer 2

删除该div。只需将类collegeInfo添加到要隐藏的行（元素）中，而不是$("div.collegeInfo")选择器使用$(".collegeInfo")。

在输入聚焦时显示/隐藏div中的表格表行

2 个答案: