javascript - 获取隐藏 span 标签的文本值

Question

我有一个包含数据列(姓名、年龄、电子邮件)的表格，我有一个隐藏的模式窗口，仅当用户点击每行旁边的“详细信息”时才会出现。

需要在模式中填充的数据在隐藏的 span 标签中，带有 hide-name 等类。

HTML:

<tr class="xrow row-2">
<td>Fisher, Baker</td>
<td>2 notes</td>
<td><a href="#" class="btn btn-primary btn-sm btn-review" data-toggle="modal" data-target="#reviewMeetingModal">Review</a></td>
<span class="hide hidden-name">Fisher, Baker</span>
<span class="hide hidden-date">2014-03-20</span>
<span class="hide hidden-time">14:00:00</span>
</tr>

这是我使用过的 JS，但是当我调用 name 变量时，它什么也没有返回。

$('.xrow').on("click", '.btn-review', function () {
    var name = $(this).closest('span.hidden-name').text();
    // alert(name);
}

Answer 1

this 在你的代码中指的是 .btn-review 元素而不是 tr，你应该首先选择最接近的 tr 元素:

var name = $(this).closest('tr').find('span.hidden-name').text();

编辑:你的标记无效，tr 元素只能有 td 子元素，你应该用 td 元素包裹 span 元素，浏览器将以不同方式呈现此标记。更改标记后，上面的代码片段应该可以工作。

我建议将 span 移动到具有子按钮的 td 元素，然后使用 $(this).siblings('span .hidden-name').text() 这比使用 closest 然后 find 更有效。

<tr class="xrow row-2">
    <td>Fisher, Baker</td>
    <td>2 notes</td>
    <td>
       <a href="#" class="btn btn-primary btn-sm btn-review" data-toggle="modal" data-target="#reviewMeetingModal">Review</a>
       <span class="hide hidden-name">Fisher, Baker</span>
       <span class="hide hidden-date">2014-03-20</span>
       <span class="hide hidden-time">14:00:00</span>
    </td>
</tr>