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>

该表的理论是它将通过动态数据输出数百行。我已经向data-action编写了一个名为delete_media的javascript方法，我试图通过点击链接获取td tr.mediaTitle中当前行的文本值的标题使用div class .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);
});

返回undefined或空值。不是我想要的。

但是当我将其包裹在.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的方法中使用data-action函数是没有意义的。据我所知，我没有在我的第一个/期望的方法中正确使用$(this)。我在这里遗漏了一些东西，并期待一个比我聪明的人帮助我在jQuery学习中找到缺失的部分。任何帮助将不胜感激。

Answer 1

这是一种可以将这一切包装成一个简单插件的方法。唯一的click事件被委托给表本身，以考虑将来动态添加的行。

每个[data-action]都拥有自己的actionMethod。每行使用与每个媒体项相关的数据属性

用法：$('#my-table').mediaActions()

由于您不可能同时拥有大量实例，因此我认为使用proptotype继承没有任何大的优势。所有命名的函数都将在包含插件的IIFE内部隔离

＆＃13;

(function($) {
  // hoisted references to functions at bottom
  var actionMethods = {
    'restore_media' : restore_media,
    'delete_media'  : delete_media,
    'download_media': download_media
  };

  $.fn.mediaActions = function(opts) {
    // return this to allow jQuery chaining
    return this.each(function() {
      // delegate clcik listener to the table with `[data-action]` targets
      $(this).on('click', '[data-action]', function(e) {
        var $el = $(this),
          $row = $el.closest('tr'),
          action = $el.data('action'),
          media_data = $row.data();
        // call method for this action passing in current row and row data
        // TODO : make sure method exists for current action
        actionMethods[action]($row, media_data);
      });
    })
  }

  function restore_media($row, media_data) {
    // somehow validate it needs restoring first
    console.log('Restoring', media_data);
    $row.removeClass('deleted');
  }

  function delete_media($row, media_data) {
    console.log('Deleting', media_data);
    $row.addClass('deleted');
  }

  function download_media($row, media_data) {
    console.log('Downloading', media_data);
  }

})(jQuery);
$('#my-table').mediaActions()

＆＃13;

tr.deleted {
  background: #ccc
}

＆＃13;

<link href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<table id="my-table">
  <tbody>
    <tr data-media_title="Media Name Title" data-media_id="1234">
      <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>
    <tr data-media_title="Media  2" data-media_id="678">
      <td>img</td>
      <td class="mediaTitle"><span class="media_title">Media  2</span></td>
      <td>type</td>
      <td>2017-08-30 10:30am</td>
      <td>2017-09-01 11:34am</td>
      <td>Foo, Bar</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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

从div类返回表行td项而不使用onClick

1 个答案: