Question

status_idという属性の値に基づいて<tr>を非表示にしたいとします。そして私はjQueryデータテーブルを使用しています。

これは私が試したものですが、動作しません。

これは私のテーブルで、私は<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(); 
    } 
}); 

あるに属性status_idと<tr>を切り替えたいから私が間違っている？

Answer 1

を使用

まずstatus_idはspanの属性なので、find()の使用は間違っています。

第2に、buttonはtableに含まれていないため、closest()はDOMを上回るので何も見つかりません。 next()とfind()の組み合わせが必要です。それぞれtrにあるspan要素をループする必要があります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）toggleValが配列であるとして、あなたは文字列であるstatusToggleを比較カント）STATUS_ID

2を取得するには$(this).closest('tr').children('span').find('span').attr('status_id')を使用する - 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(); 
    } 
});