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> 

에 속성 status_id와 <tr>을 전환 할 그리고 이것은 그에 대한 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()이 필요합니다. 각 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로 status_id

2) 배열, 당신은 statusToggle 비교 질수 있습니다를 얻을 수 $(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(); 
    } 
});