過濾表格。如果其中一個規則適用，則顯示內容

如果某個人是插圖畫家或作家，我可以過濾表格。過濾表格。如果其中一個規則適用，則顯示內容

<table> 
    <tr class="writer"> 
    <td>John Doe</td> 
    <td>Jan 01, 1980</td> 
    <td>[email protected]</td> 
    </tr> 
    <tr class="writer illustrator"> 
    <td>Jane Doe</td> 
    <td>Sept 01, 1980</td> 
    <td>[email protected]</td> 
    </tr> 
    <tr class="illustrator"> 
    <td>Mel Smith</td> 
    <td>Aug 01, 1980</td> 
    <td>[email protected]</td> 
    </tr> 
    <tr class="writer"> 
    <td>Harry Smith</td> 
    <td>Dec 01, 1980</td> 
    <td>[email protected]</td> 
    </tr> 
</table> 
<button id="writer">writer</button> 
<button id="illustrator">illustrator</button> 
<button id="reset">reset</button>

，這是jQuery的

jQuery(function() { 
$('#illustrator').click(function() { 
    $('table tr.writer').hide(); 
    $('table tr.illustrator').show(); 
}) 
$('#writer').click(function() { 
    $('table tr.writer').show(); 
    $('table tr.illustrator').hide(); 
}) 
$('#reset').click(function() { 
    $('table tr').show(); 
}) 
})

我的問題現在的問題是，如果錶行具有相同的類，這個一定行的犯規出現。就像這個例子，當我點擊編輯器時，Jane Doe不會出現。我該怎麼做呢？謝謝！

來源

2014-03-31 user3079066

只要改變隱藏的秩序，並顯示

jQuery(function() { 
    $('#illustrator').click(function() { 
     $('table tr.writer').hide(); 
     $('table tr.illustrator').show(); 
    }) 
    $('#writer').click(function() { 
     $('table tr.illustrator').hide(); 
     $('table tr.writer').show(); 
    }) 
    $('#reset').click(function() { 
     $('table tr').show(); 
    }) 
})

演示：Fiddle

如果你想香料它一點點，你可以用忽略這些項：未選擇像

jQuery(function() { 
    $('#illustrator').click(function() { 
     $('table tr:not(.illustrator)').hide(); 
     $('table tr.illustrator').show(); 
    }) 
    $('#writer').click(function() { 
     $('table tr:not(.writer)').hide(); 
     $('table tr.writer').show(); 
    }) 
    $('#reset').click(function() { 
     $('table tr').show(); 
    }) 
})

演示：Fiddle

另一變型，以支持多種類型的是具有用於所述按鈕的單個處理器和在其中指定目標類型等

<button class="trigger" data-target="writer">writer</button> 
<button class="trigger" data-target="illustrator">illustrator</button> 
<button class="trigger">reset</button>

然後

jQuery(function() { 
    $('.trigger').click(function() { 
     var target = $(this).data('target'); 
     if (target) { 
      $('table tr:not(.' + target + ')').hide(); 
      $('table tr.' + target).show(); 
     } else { 
      $('table tr').show(); 
     } 
    }) 
})

演示：Fiddle

來源

2014-03-31 06:07:38

只是嘗試下面的代碼..你需要改變編碼的順序如下所示。

$('#writer').click(function() { 
     $('table tr.illustrator').hide(); 
     $('table tr.writer').show(); 
    })

http://jsfiddle.net/avmCX/23/

來源

2014-03-31 06:09:08 Neel

必須檢查元素有沒有你的類

jQuery(function() { 
      $('#illustrator').click(function() { 
       $('table tr.writer:not(.illustrator)').hide(); 
       $('table tr.illustrator').show(); 
      }) 
      $('#writer').click(function() { 
       $('table tr.writer').show(); 
       $('table tr.illustrator:not(.writer)').hide(); 
      }) 
      $('#reset').click(function() { 
       $('table tr').show(); 
      }) 
     })

來源

2014-03-31 06:23:06

過濾表格。如果其中一個規則適用，則顯示內容

回答

相關問題