如何用一個按鈕使用CSS和Jquery獲得兩個結果

Question

好吧，我試圖完成的是一旦有人點擊頂部的按鈕，我們會說「Pagado」按鈕我希望這也顯示「Pendiente」結果，但我們會說他們是相關的，我希望他們都顯示。

下面見圖片爲例：

下面是我想創建...一旦「Pagado」按鈕的結果，如果只按下結果與「Pagado 「提及將顯示在頁面上。

下面是該示例代碼... http://ibootstrap.net/Snippets/IDXdL46

如何顯示在同一時間Pendiente和Pagado？

<tr data-status="pagado_pendiente">其中行既有地位說(Pagado)和(Pendiente)

，並在你的JS，而不是匹配的確切字符串找contains類似：

Answer 1

在你的HTML像只需使用組合data-status：

$('.table tr[data-status*="' + $target + '"]').fadeIn('slow');而不是$('.table tr[data-status="' + $target + '"]').fadeIn('slow');

Answer 2

添加這個js代替它會工作順利

$(document).ready(function() { 

$('.star').on('click', function() { 
    $(this).toggleClass('star-checked'); 
}); 

$('.ckbox label').on('click', function() { 
    $(this).parents('tr').toggleClass('selected'); 
}); 

$('.btn-filter').on('click', function() { 
    var $target = $(this).data('target'); 
    if ($target === 'pagado') { 
     $('.table tr').css('display', 'none'); 
     $('.table tr[data-status="' + $target + '"], .table tr[data-status="pendiente"]').fadeIn('slow'); 
    } else if ($target != 'all') { 
     $('.table tr').css('display', 'none'); 
     $('.table tr[data-status="' + $target + '"]').fadeIn('slow'); 
    } else { 
    $('.table tr').css('display', 'none').fadeIn('slow'); 
    } 
}); 

}）;

我已經添加了新的條件，如果你的代碼檢查，如果目標是pagado顯示該TR加pendiente TR

if ($target === 'pagado') { 
     $('.table tr').css('display', 'none'); 
     $('.table tr[data-status="' + $target + '"], .table tr[data-status="pendiente"]').fadeIn('slow'); 
    } 

可以pagado更改爲任何你想要的或添加更多的錶行，歡呼聲。