Question

我有以下表结构：

            <tr>
                <th><label for="ctl00_bodyContent_username">username:</label></th>
                <td class="field"><input name="ctl00$bodyContent$username" type="text" id="ctl00_bodyContent_username" /></td>
                <td class="info">
                    <div class="message">what do you want to be known as?</div>
                    <div class="valid">username available</div>
                    <div class="invalid">this username is already taken</div>
                </td>
            </tr>

我想要实现的是当文本框＃ctl00_bodyContent_username具有焦点时，在相邻的表格单元格中显示te div .message（默认为display：none）。

Answer 1

$("#ctl00_bodyContent_username").focus(function(){
  $(".message").show();
})

让我向您简要介绍 Show（）方法：

与没有动画的show（speed，[callback]）相同。如果所选元素全部可见，则不会更改任何内容。 通过hide（）调用或样式表中的display：none隐藏元素无关紧要。

来自：JQuery Effects

Answer 2

假设这些中不止一个（而不是另一个假设）：

$("td.field :input").focus(function() {
  var info = $(this).parent().next();
  if ($(".valid:visible, .invalid:visible", info).length == 0) {
    info.children("message").show();
  }
}).blur(function() {
  var info = $(this).parent().next();
  info.children("message").hide();
});

这也假设您希望在字段失去焦点时隐藏消息。

Answer 3

试试这个：

$("#ctl00_bodyContent_username").focus(function(){
  $(this).parent().next().children('.message').show();
})

，其中

父级

获取元素的直接父级。如果在一组元素上调用，则parent返回一组唯一的直接父元素。

下一步

获取一组元素，其中包含每个给定元素集的唯一下一个兄弟节点。

<强>的子

获取一组元素，其中包含每个匹配元素集的所有唯一直接子元素。

显示

如果隐藏了匹配元素，则显示每个匹配元素。

有关详细信息，请参阅jQuery文档中的traversing。

如何使用jQuery在表格单元格中选择div

3 个答案: