Question

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

这是我尝试过的，但不起作用。

这是我的表格，我希望在<tr>

中切换status_id的{{1}}属性

<span>

这就是js，

<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>

我哪里错了？

Answer 1

首先status_id是span的属性，因此您对find()的使用不正确。

其次，button不在table范围内，因此closest()在DOM上升时不会找到任何内容。您需要next()和find()的组合。您还需要使用span

遍历每个tr中找到的each()元素

最后请注意，创建自己的非标准属性意味着您的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>

Answer 2

尝试：

1）使用public static boolean recursiveChecking(List<Integer> x,List<Integer> y) { if(x.size() == 0 || y.size() == 0){ return false; } else if (x.get(0).equals(y.get(0))) { return true; } else { if (x.get(0) < y.get(0)) { return recursiveChecking(x.subList(1, x.size()-1), y); } else { return recursiveChecking(x, y.subList(1, y.size()-1)); } } }获取status_id

2）由于$(this).closest('tr').children('span').find('span').attr('status_id')是一个数组，您无法将toggleVal字符串与statusToggle进行比较 - 所以请使用toggleVal

$.inArray

在特定的attibute值上使用jQuery切换（隐藏/显示）

2 个答案: