javascript - 从 div 类返回表行 td 元素而不使用 onClick

Question

我有一个简单的表格，如下所示:

<table>
    <tbody>
        <tr>
           <td>img</td>
           <td class="mediaTitle"><span class="media_title">Media Name Title</span></td>
           <td>type</td>
           <td>2017-08-30 10:30am</td>
           <td>2017-09-01 11:34am</td>
           <td>Smith, Tater</td>
           <td><i class="fa fa-arrow-circle-down action" data-action="download_media" title="Download Media" aria-hidden="true"></i></td>
           <td><i class="fa fa-refresh action" data-action="restore_media" title="Restore Media" aria-hidden="true"></i></td>
           <td><i class="fa fa-trash-o action" data-action="delete_media" title="Permanently Delete Media" aria-hidden="true"></i></td>
        </tr>
   </tbody>
</table>

该表的理论是它将通过动态数据输出数百行。我已经将 javascript 方法写入 data-action叫delete_media ，我试图在 td tr.mediaTitle 中获取当前行文本值的标题。通过单击 div 类 .fa-trash-o 的链接。看起来很简单。

我现在正在使用这个函数，我使用$(this)认为$(this)指的是被单击的按钮，然后我从那里向上遍历 DOM 树:

Blah.prototype._delete_media = function(data,e,el) {
        var self = this,
            mediaTitle = $(this).closest('tr').find('td.mediaTitle').text();

        console.log(mediaTitle);
});

返回未定义值或空白值。不是我要找的。

但是当我把它包裹在 .onClick 中时然后我就能得到 .text()所需值:

Blah.prototype._delete_media = function(data,e,el) {
        var self = this;

        $('.fa-trash-o').click(function() {
            var mediaTitle = $(this).closest('tr').find('td.mediaTitle').text();

        console.log(mediaTitle);
        });
});

好的。令人困惑。

现在，显然使用 .onClick 没有意义。已绑定(bind)到 data-action 的方法内的函数。据我所知，我没有使用 $(this)正确地使用我的第一个/所需的方法。我在这里遗漏了一些东西，希望有人比我更聪明来帮助我找到 jQuery 学习中遗漏的部分。任何帮助将不胜感激。

Answer 1

更新

将 $(this) 更改为 $(e.target)。在演示中，我添加了另一行，然后对文本进行编号以区分它们。

<小时/>

不用这么遍历DOM，直接使用选择器td.mediaTitle即可。

演示

$('.fa-trash-o').on('click', function(e) {
  var mediaTitle = $(e.target).closest('tr').find('td.mediaTitle').text();

  console.log(mediaTitle);
});

<link href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">


<table>
  <tbody>
    <tr>
      <td>img</td>
      <td class="mediaTitle">
        <span class="media_title">Media Name Title 1
             </span>
      </td>
      <td>type</td>
      <td>2017-08-30 10:30am</td>
      <td>2017-09-01 11:34am</td>
      <td>Smith, Tater</td>
      <td>
        <i class="fa fa-arrow-circle-down"></i>
      </td>
      <td>
        <i class="fa fa-refresh"></i>
      </td>
      <td>
        <i class="fa fa-trash-o"></i>
      </td>
    </tr>

    <tr>
      <td>img</td>
      <td class="mediaTitle">
        <span class="media_title">Media Name Title 2
             </span>
      </td>
      <td>type</td>
      <td>2017-08-30 10:30am</td>
      <td>2017-09-01 11:34am</td>
      <td>Smith, Tater</td>
      <td>
        <i class="fa fa-arrow-circle-down"></i>
      </td>
      <td>
        <i class="fa fa-refresh"></i>
      </td>
      <td>
        <i class="fa fa-trash-o"></i>
      </td>
    </tr>
  </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>