jQuery的顯示/隱藏行

Question

前言：

我上的功能合作，以允許用戶選擇數據點通過篩選的表。每個表格行具有3個與其關聯的屬性，Title,Department和Location。

頁面上有三個多選過濾器選項，允許用戶通過每個字段選擇一個或多個過濾器選項來縮小搜索範圍。

由於選擇了這些選項，它會觸發一個函數來調整表格並僅顯示包含與其過濾器匹配的數據的行。

問題：

由於我的函數包含一個循環，獨立地檢查每個的過濾選項，其隱藏/顯示，以行，這是造成問題。例如，如果它應該顯示錶格中的第一行，因爲過濾器告訴它，下一個過濾器表示只顯示與其過濾器相匹配的行，忽略它之前的行。

我曾嘗試：

我試圖建立功能在它隱藏所有行開始，然後如果錶行的屬性，已包含在我們的過濾器，它顯示了一種方式行。這適用於第一個過濾器，但它遍歷行並擊中其他過濾器，它在不應該時隱藏它們。

理想的解決方案：

尋找一種方式來清理這個功能它通過函數調用一次全部，而不是應用篩選邏輯秩序。如果我選擇Austin作爲我的位置，它將顯示具有屬性location=austin的行。如果我然後在過濾器中選擇department，則需要將位置和部門過濾器應用於表格。

代碼示例：

// Filters our user groups based on selections 
function filterUserGroups(){ 

    // Define our vars 
    var locationsFilter = $('[name=in_ugLocationsFilter]').val(), 
     departmentsFilter = $('[name=in_ugDepartmentsFilter]').val(), 
     titlesFilter = $('[name=in_ugTitlesFilter]').val(), 
     tempLocation = '', 
     tempDepartment = '', 
     tempTitle = ''; 

    // Loop over our rows and show the data that matches our filters 
    $('[name=userGroupsRows] tr').hide(); 
    $('[name=userGroupsRows] tr').each(function(){ 

    // Get the current vars of each row 
    tempLocation = $(this).data('location'); 
    tempDepartment = $(this).data('department'); 
    tempTitle = $(this).data('title'); 

    // Do we have any filter options selected? 
    if(locationsFilter || departmentsFilter || titlesFilter){ 

     // If the location is in our filter, show row 
     if(jQuery.inArray(tempLocation, locationsFilter) != -1) { 
     $(this).show(); 
     } 
     // If the departmentis in our filter, show row 
     if(jQuery.inArray(tempDepartment, departmentsFilter) != -1) { 
     $(this).show(); 
     } 
     // If the title is in our filter, show row 
     if(jQuery.inArray(tempTitle, titlesFilter) != -1) { 
     $(this).show(); 
     } 
    } 
    }) 
} 

小提琴： https://jsfiddle.net/p4xvgLo1/1/

Answer 1

編輯：嘗試用這樣的：

var show = false; 
if (locationsFilter) { 
    if (jQuery.inArray(tempLocation, locationsFilter) != -1) { 
    show = true; 
    } 
} 
if (!show && departmentsFilter) { 
    if (jQuery.inArray(tempDepartment, departmentsFilter) != -1) { 
    show = true; 
    } 
} 
if (!show && titlesFilter) { 
    if (jQuery.inArray(tempTitle, titlesFilter) != -1) { 
    show = true; 
    } 
} 
if (show) $(this).show(); 

見編輯小提琴：https://jsfiddle.net/p4xvgLo1/7/

Answer 2

因爲你隱藏了所有我也會添加一張支票，所以如果所有的過濾器都是空的，一切都顯示爲(locationsFilter==null && departmentsFilter==null && titlesFilter==null)，然後我會將data-department="Global Financial Services 2"更改爲沒有空格，因此它與過濾器名稱相同：data-department="Global Financial Services2"。

if (locationsFilter || departmentsFilter || titlesFilter) { 
    // If the location is in our filter, show row 
    if (jQuery.inArray(tempLocation, locationsFilter) != -1 || (locationsFilter==null&&departmentsFilter==null&&titlesFilter==null)) { 
     $(this).show(); 
    } 
    // If the location is in our filter, show row 
    if (jQuery.inArray(tempDepartment, departmentsFilter) != -1|| (locationsFilter==null&&departmentsFilter==null&&titlesFilter==null)) { 
     $(this).show(); 
    } 
    // If the location is in our filter, show row 
    if (jQuery.inArray(tempTitle, titlesFilter) != -1|| (locationsFilter==null&&departmentsFilter==null&&titlesFilter==null)) { 
     $(this).show(); 
    } 

編輯小提琴：https://jsfiddle.net/3c3vjfhz/1/