javascript - 在特定属性值上使用 jQuery 切换(隐藏/显示)<td>

Question

我想隐藏 <tr>基于名为 status_id 的属性的值.我正在使用 jQuery 数据表。

这是我尝试过的，但没有用。

这是我的表，我想从中切换 <tr>具有属性 status_id在 <span>

<button id="hide-tasks" class="hide-tasks" type="button">Toggle</button>
<table id='tbl_taskList'>
<tbody>
    <tr role="row" class="odd">
        <td style="padding-right: 5px;">
            <span data-title="New - Unclaimed / Unassigned" class="data-hover stat_195 clas clickTip  badge  stat-adjust btn-list fa fa-adjust" status_id="4" move-left="500">&nbsp;</span>
        </td>
    </tr>
</tbody>

这就是 js，

$(document).on('click', '.hide-tasks', function (e) {
    var toggleVal = [1, 9, 10, 11, 12];
    var statusToggle = $(this).closest('tr').children('span').find('status_id');
    if (statusToggle === toggleVal) {
        statusToggle.toggle();
    }
 });

我哪里错了？

Answer 1

首先 status_id 是 span 的一个属性，所以你对 find() 的使用是不正确的。

其次，button 不在 table 中，因此 closest() 在 DOM 上将找不到任何东西。您需要结合使用 next() 和 find()。您还需要使用 each()

遍历在每个 tr 中找到的 span 元素

最后请注意，创建您自己的非标准属性将意味着您的 HTML 无效。要使用元素存储自定义数据，请使用 data-* 属性。

从那里您可以使用 indexOf() 来发现 status-id 是否在数组中，并且 toggle() 需要元素根据需要。试试这个:

var toggleValues = [1, 9, 10, 11, 12];

$(document).on('click', '.hide-tasks', function(e) {
  $(this).next('table').find('span').each(function() {
    var $el = $(this);
    $el.closest('tr').toggle(toggleValues.indexOf($el.data('status-id')) == -1);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="hide-tasks" class="hide-tasks" type="button">Toggle</button>
<table id='tbl_taskList'>
  <tbody>
    <tr role="row" class="odd">
      <td style="padding-right: 5px;">
        <span data-title="New - Unclaimed / Unassigned" class="data-hover stat_195 clas clickTip  badge  stat-adjust btn-list fa fa-adjust" data-status-id="1" move-left="500">1</span>
      </td>
    </tr>
    <tr role="row" class="odd">
      <td style="padding-right: 5px;">
        <span data-title="New - Unclaimed / Unassigned" class="data-hover stat_195 clas clickTip  badge  stat-adjust btn-list fa fa-adjust" data-status-id="2" move-left="500">2</span>
      </td>
    </tr>
    <tr role="row" class="odd">
      <td style="padding-right: 5px;">
        <span data-title="New - Unclaimed / Unassigned" class="data-hover stat_195 clas clickTip  badge  stat-adjust btn-list fa fa-adjust" data-status-id="9" move-left="500">9</span>
      </td>
    </tr>
    <tr role="row" class="odd">
      <td style="padding-right: 5px;">
        <span data-title="New - Unclaimed / Unassigned" class="data-hover stat_195 clas clickTip  badge  stat-adjust btn-list fa fa-adjust" data-status-id="10" move-left="500">10</span>
      </td>
    </tr>
    <tr role="row" class="odd">
      <td style="padding-right: 5px;">
        <span data-title="New - Unclaimed / Unassigned" class="data-hover stat_195 clas clickTip  badge  stat-adjust btn-list fa fa-adjust" data-status-id="15" move-left="500">15</span>
      </td>
    </tr>
  </tbody>