兩個jquery過濾器取消彼此

Question

我創建了兩個過濾器，根據從兩個不同的下拉列表中選擇的值來顯示/隱藏表格行。即時激活過濾器的列是user_name和script_name。過濾器的工作方式是它們首先顯示所有行並隱藏除選定值以外的所有內容，但是當我想使用兩個過濾器時，每個過濾器都會取消另一個過濾器。 這是我的兩個過濾器：

$(document).ready(function(){ 
    $('#userSelected').change(function() { 
     $('tr').show(); 
     if ($(this).val() == "All") { 
     } 
     $('tr').filter(function() { 
      return $(this).find('td.userName').filter(function() { 
       return $(this).text().indexOf($('#userSelected').val()) == -1; 
      }).length; 
     }).hide(); 
    }); 
}); 

$(document).ready(function(){ 
    $('#scriptSelected').change(function() { 
     $('tr').show(); 
     if ($(this).val() == "All") { 
     } 
     $('tr').filter(function() { 
      return $(this).find('td.scriptName').filter(function() { 
       return $(this).text().indexOf($('#scriptSelected').val()) == -1; 
      }).length; 
     }).hide(); 
    }); 
}); 

和我的表：

<table class="table table-bordered table-hover" ng-controller="tableCtrl"> 
    <thead> 
    <th>user name</th> 
    <th>script name</th> 
    <th>cron format<span class="glyphicon glyphicon-question-sign"></span></th> 
</thead> 
<tbody ng-repeat="(user_id,script_id) in data"> 
    <tr ng-repeat="(script_id, cron_format) in script_id"> 
     <td class="userName">{{user(user_id)}}</td> 
     <td class="scriptName">{{script(script_id)}}</td> 
     <td class="cronFormat"><span contenteditable="true" ng-repeat="l in letters(cron_format) track by $index">{{l}}</span></td> 
    </tr> 
</tbody> 

假設有一種人與USER_NAME 「大衛」 和SCRIPT_NAME 「腳本一個」 .. .how如何顯示只有這行沒有過濾器取消彼此？

嘗試只顯示與腳本一行大衛http://jsfiddle.net/al_sade/rffbprut/，你會明白我的用意

Answer 1

試試下面的代碼

$(document).ready(function(){ 
$('#userSelected').change(function() { 
    $('tr').show();   
    if ($('#scriptSelected').val() != "All" && $('#scriptSelected').val() != null) { 
     $('tr').filter(function() { 
     return $(this).find('td.scriptName').filter(function() { 
      return $(this).text().indexOf($('#scriptSelected').val()) == -1; 
     }).length; 
    }).hide(); 
    } 
    if ($('#userSelected').val() != "All" && $('#userSelected').val() != null) { 
     $('tr').filter(function() { 
     return $(this).find('td.userName').filter(function() { 
      return $(this).text().indexOf($('#userSelected').val()) == -1; 
     }).length; 
    }).hide(); 
    } 

}); 
}); 

$(document).ready(function(){ 
$('#scriptSelected').change(function() { 
    $('tr').show();   
    if ($('#scriptSelected').val() != "All" && $('#scriptSelected').val() != null) { 
     $('tr').filter(function() { 
     return $(this).find('td.scriptName').filter(function() { 
      return $(this).text().indexOf($('#scriptSelected').val()) == -1; 
     }).length; 
    }).hide(); 
    } 
    if ($('#userSelected').val() != "All" && $('#userSelected').val() != null) { 
     $('tr').filter(function() { 
     return $(this).find('td.userName').filter(function() { 
      return $(this).text().indexOf($('#userSelected').val()) == -1; 
     }).length; 
    }).hide(); 
    } 

}); 
}); 

在這裏工作的小提琴 https://jsfiddle.net/rffbprut/1/

Answer 2

只需創建一個單一的過濾器功能，每當其中一個下拉值發生變化時調用它：

function update() 
{ 
    var selectedScript = $('#scriptSelected').val(), 
    selectedUser = $('#userSelected').val(); 

    $('tr') 
     .show(); 
     .filter(function() { 
     var matchedUserName = selectedUser == 'All' || $(this).find('td.userName').filter(function() { 
      return $(this).text().indexOf(selectedUser) != -1; 
     }).length; 

     var matchedScriptName = selectedScript == 'All' || $(this).find('td.scriptName').filter(function() { 
       return $(this).text().indexOf(selectedScript) != -1; 
      }).length; 

     return !matchedUserName || !$matchedScriptName; 
    }).hide(); 
} 

jQuery(function($) { 
    $('#userSelected,#scriptSelected').change(update); 
});