Question

我有一个包含多行错误的表。每行都有一个基于错误的清理状态分配给它的类。

<tr class="bugrow wait_dev">     <td>blah</td></tr>
<tr class="bugrow wait_support"> <td>blah</td></tr>
<tr class="bugrow wait_branch">  <td>blah</td></tr>

我正在使用Bootstrap为每种不同的状态创建一个按钮列表。这些按钮实际上只是HTML中的复选框。

<input class="scrub_checkbox" id="wait_dev" type="checkbox" autocomplete="off">Wait dev
<input class="scrub_checkbox" id="wait_support" type="checkbox" autocomplete="off">Wait support
<input class="scrub_checkbox" id="wait_branch" type="checkbox" autocomplete="off">Wait branch

我想要做的是，有一个jQuery函数，当单击一个按钮（并选择底层复选框）时，所有没有相应类的行都被隐藏，只留下所选行可见。

我希望能够点击/选择多个选项，并显示所有这些行类型，并隐藏所有其他行。

我如何在jQuery中执行此操作？

解决方案

我想出了一个基于TrueBlueAussie＆OR选项的解决方案。一旦没有选中任何复选框，这将显示所有行。

$('.scrub_checkbox:checkbox').change(function(){
    // Build a list of comma-separated classes
    var classes = ""
    // for each checked box with class scrub_checkbox
    $('.scrub_checkbox:checkbox:checked').each(function(){
        if (classes) classes += ",";
        classes+= "." + $(this).attr('id');
    });
    if (classes){   // if there are classes to show
        $('.bugrow').hide().filter(classes).show(); 
    } else {        // nothing checked, show all
        $('.bugrow').show();
    }
});

Answer 1

将所有类放入数组中。然后，当选择多个项目ID时，将它们放入自己的数组中。然后对类数组进行排序，以查看是否存在与所选ID数组相关的唯一数据。如果剩下unique，则执行一项功能隐藏它们。

Here's a help on how to achieve this

我不会为你做这件事，因为你没有证明你自己已经把任何jquery工作。但是隐藏功能：

function hideElements(classNames){
    for(i<0;i<classNames.length;i++){
        $(classNames[i]).hide();
    }
}

arrayOfClassNames = ['class1', 'class2'];
hideElements(arrayOfClassNames);

超级简单。您将传递数组中遗留的基础类名。然后它会为你隐藏它们。然后，您将数组ID传递给它自己的名为showElements（listOfIDs）的唯一函数;你将与hide完全相反的地方。为了使所选择的那些重新出现。

Answer 2

以下是处理它的方法： http://jsfiddle.net/fxaytn1L/

jQuery的：

jQuery(function() {
    jQuery('input[type="checkbox"]').change(function() {
        var cBs = jQuery('.showCB:checked'),
            chkd = cBs.length,            
            toHide = jQuery('.bugrow');
        toHide.show();
        if (chkd > 0) {
            cBs.each(function() {
                toHide = toHide.not('.' + this.id);
            });
            toHide.hide();
        }
    });
});

Answer 3

如果你想＆＃34; AND＆＃34;逻辑（即组合选择），您可以基于已选中复选框的ID生成jQuery选择器（通过添加.前缀视为类）：

e.g。

$(':checkbox').change(function(){
    // Build a list of comma-separated classes
    var classes = ""
    $(':checkbox:checked').each(function(){
        classes+= "." + $(this).attr('id');
    });
    // hide all, then show matching only
    $('.bugrow').hide().filter(classes).show();
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/nrgsqr3p/1/

如果你想要＆＃34;或＆＃34;相反，选择生成逗号分隔的选择器列表。

e.g。

$(':checkbox').change(function(){
    // Build a list of comma-separated classes
    var classes = ""
    $(':checkbox:checked').each(function(){
        if (classes) classes += ",";
        classes+= "." + $(this).attr('id');
    });
    // hide all, then show matching only
    $('.bugrow').hide().filter(classes).show();
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/nrgsqr3p/2/

Answer 4

给每个复选框一个类，然后每次更改循环并隐藏所有不检查。可能效率不高，但工作正常，复选框不多。

$('input').change(function () {
    $('tr').show();
    $('input:checkbox.check').each(function () {
        if (!this.checked) {
            $('.' + $(this).attr('id')).hide();
        }
    });
});

http://jsfiddle.net/vn8Lxgod/2/

隐藏/显示具有多个不同类的行

4 个答案: