Toggle (Verbergen/Anzeigen) <tr> mit jQuery auf spezifischen Wert

Question

Ich möchte die <tr> basierend auf dem Wert des Attributs status_id verbergen. Und ich benutze jQuery Datentabelle.

Dies ist, was ich versucht habe, aber nicht funktioniert.

$(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(); 
    } 
}); 

Das ist mein Tisch, von dem ich die <tr> mit dem Attribut status_id in <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> 

Und das ist die js für das, wechseln wollen Wo Liege ich falsch?

Answer 1

Erstens status_id ist ein Attribut der span, so dass Ihre Verwendung von find() falsch ist.

Zweitens ist die button nicht innerhalb der table, so closest() wird nichts finden, wie es das DOM geht. Sie benötigen eine Kombination von next() und find(). Sie werden auch in jedem tr mit each()

Schließlich ist zu beachten gefunden Schleife durch das span Element müssen, dass Ihre eigene Nicht-Standard-Attribute zu schaffen bedeutet, dass Ihre HTML ungültig ist. Um benutzerdefinierte Daten mit einem Element zu speichern, verwenden Sie die Attribute data-*.

Von dort können Sie indexOf() verwenden, um festzustellen, ob die status-id im Array ist, und toggle() das erforderliche Element nach Bedarf. Versuchen Sie folgendes:

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

Versuchen:

1) $(this).closest('tr').children('span').find('span').attr('status_id') Verwenden Sie die status_id

2) als toggleVal wird ein Array zu bekommen, man kann statusToggle vergleichen, die Zeichenfolge ist - mit toggleVal - so verwenden $.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(); 
    } 
});