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

Question

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

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

这是我的表格，我要从中切换<span>具有status_id属性的<tr> <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 ，因此在DOM上， closest()将找不到任何内容。 您将需要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> 

Answer 2

尝试：

1）使用$(this).closest('tr').children('span').find('span').attr('status_id')获得status_id

2）由于toggleVal是一个数组，因此无法比较statusToggle的字符串-与toggleVal因此使用$.inArray

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