Question

我有两个函数，toggleUserTypeRows（）和toggleRows（）。每个函数用于基于用户是用户还是admin（toggleUserTypeRows（））或者用户是活动还是非活动（toggleRows（））来隐藏/显示表的行。他们两个都在自己工作，但是我试图让他们一起工作 - 现在他们互相取消了，比如我过滤行以便只有管理员帐户可见然后尝试过滤仅列出活动用户，该列表现在将显示作为管理员或普通用户的活动用户。

我知道如何做到这一点，但是在编码方面我不是很好......我知道有更好的方法可以做到这一点，而不是在我的交换机案例中粘贴一堆if语句。所以我正在寻找的是如何在没有通常的百万行代码的情况下解决这个问题的一些好主意。

功能：

function toggleUserTypeRows(){
    var selected = $('#userTypeDropDown').val();
    switch (selected){
        case 'User':
            $('table tr[userType="user"]').show();
            $('table tr[userType="admin"]').hide();
            break;

    case 'Admin':
        $('table tr[userType="admin"]').show();
        $('table tr[userType="user"]').hide();
        break;

    default:
        $('table tr[userType="admin"]').show();
        $('table tr[userType="user"]').show();
}
// color every other row
$('#tableUsers tr').removeClass('altr').filter(':odd').addClass('altr');
}

function toggleRows(){
var selected = $('#userStatusDropDown').val();

switch (selected){
    case 'Active':
        var $rows = $('.userActive');
        $rows.show();
        $('.userInactive').hide();
        break;

    case 'Inactive':
        var $rows = $('.userInactive');
        $rows.show();
        $('.userActive').hide();
        break;

    default:
        var $rows = $('#tableUsers tr');
        $rows.show();
}
 // color every other row
 $rows.removeClass('altr').filter(':odd').addClass('altr');
}

下拉更改代码：

$(document).ready(function(){

        // admin/user drop down changes
    $('#userTypeDropDown').change(function(){
        toggleUserTypeRows();
    });

    // active/inactive drop down changed
    $('#userStatusDropDown').change(function(){
        toggleRows();
    });
 });

基于两个元素显示/隐藏表的行

0 个答案: