div的jQuery多重过滤器

Question

我需要帮助如何管理面板的多个过滤器。 我想搜索多个字段，但要保留过滤器。 例如：我赖特面板仍然显示面板标题具有文本面板的所有面板，但在第二个输入，如果我写测试应该只显示面板有正文测试？

$("#srcPanelHeading").keyup(function() { 
 
     var panels = $('.panel-info'); 
 
     var val = this.value.toLowerCase(); 
 
     panels.show().filter(function() { 
 
      var panelHeadingText = $(this).find('.panel-heading').text().toLowerCase(); 
 
      return panelHeadingText.indexOf(val) < 0; 
 
     }).hide(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 
Panel Heading: <input type="text" class="form-control" id="srcPanelHeading" /> 
 
Panel Body: <input type="text" class="form-control" id="srcPanelBody"/> 
 
<div class="panel panel-info"> 
 
    <div class="panel-heading">Panel 1</div> 
 
    <div class="panel-body"> 
 
    Test 
 
    </div> 
 
</div> 
 

 
<div class="panel panel-info"> 
 
    <div class="panel-heading">Panel 2</div> 
 
    <div class="panel-body"> 
 
    Something to read 
 
    </div> 
 
</div> 
 

 
<div class="panel panel-info"> 
 
    <div class="panel-heading">Test 3</div> 
 
    <div class="panel-body"> 
 
    Test 
 
    </div> 
 
</div> 
 

 
<div class="panel panel-info"> 
 
    <div class="panel-heading">Panel 4</div> 
 
    <div class="panel-body"> 
 
    Test 
 
    </div> 
 
</div>

Answer 1

该过滤器可以在一个单一的处理程序相结合。下面的使用，其对于每个输入创建一个过滤器和其他后应用于每一个辅助函数：

$("#srcPanelHeading, #srcPanelBody").keyup(function() { 
 
     var getFilter = function(el, selector){ 
 
      var txt = $(el).val().toLowerCase(); 
 
      return txt 
 
      ? function(i,p){ return $(p).find(selector).text().toLowerCase().indexOf(txt) !== -1;} 
 
      : function(i,p){return true;}; 
 
     };    
 
      
 
     $('.panel-info').hide() 
 
      .filter(getFilter('#srcPanelHeading', '.panel-heading')) 
 
      .filter(getFilter('#srcPanelBody', '.panel-body')) 
 
      .show();   
 
    });

.panel{ 
 
    border:1px solid gray; 
 
} 
 

 
.panel-heading{ 
 
    font-style:italic; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 
Panel Heading: <input type="text" class="form-control" id="srcPanelHeading" /> 
 
Panel Body: <input type="text" class="form-control" id="srcPanelBody"/> 
 
<div class="panel panel-info"> 
 
    <div class="panel-heading">Panel 1</div> 
 
    <div class="panel-body"> 
 
    Test 
 
    </div> 
 
</div> 
 

 
<div class="panel panel-info"> 
 
    <div class="panel-heading">Panel 2</div> 
 
    <div class="panel-body"> 
 
    Something to read 
 
    </div> 
 
</div> 
 

 
<div class="panel panel-info"> 
 
    <div class="panel-heading">Test 3</div> 
 
    <div class="panel-body"> 
 
    Test 
 
    </div> 
 
</div> 
 

 
<div class="panel panel-info"> 
 
    <div class="panel-heading">Panel 4</div> 
 
    <div class="panel-body"> 
 
    Test 
 
    </div> 
 
</div>

Answer 2

在第二输入输入“测试”，你会得到panel1,3,5其在它和上键入“东西”“测试”的文字，你会得到panel2,5。

这是你问的吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 
Panel Heading: <input type="text" class="form-control" id="srcPanelHeading" /> 
 
Panel Body: <input type="text" class="form-control" id="srcPanelBody"/> 
 
<div class="panel panel-info"> 
 
    <div class="panel-heading">Panel 1</div> 
 
    <div class="panel-body"> 
 
    Test1 
 
    </div> 
 
</div> 
 

 
<div class="panel panel-info"> 
 
    <div class="panel-heading">Panel 2</div> 
 
    <div class="panel-body"> 
 
    Something to read 
 
    </div> 
 
</div> 
 

 
<div class="panel panel-info"> 
 
    <div class="panel-heading">Panel 3</div> 
 
    <div class="panel-body"> 
 
    Test3 
 
    </div> 
 
</div> 
 
<div class="panel panel-info"> 
 
    <div class="panel-heading">Panel 4</div> 
 
    <div class="panel-body"> 
 
Something to read 
 
    </div> 
 
</div> 
 
<div class="panel panel-info"> 
 
    <div class="panel-heading">Panel 5</div> 
 
    <div class="panel-body"> 
 
    Test5 
 
    </div> 
 
</div> 
 
<script> 
 
$("#srcPanelHeading").keyup(function() { 
 
     var panels = $('.panel-info'); 
 
     var val = this.value.toLowerCase(); 
 
     panels.show().filter(function() { 
 
      var panelHeadingText = $(this).find('.panel-heading').text().toLowerCase(); 
 
      return panelHeadingText.indexOf(val) < 0; 
 
     }).hide(); 
 
    }); 
 
    $("#srcPanelBody").keyup(function() { 
 
     var panels = $('.panel-info'); 
 
     var val = this.value.toLowerCase(); 
 
     panels.show().filter(function() { 
 
      var panelHeadingText = $(this).find('.panel-body').text().toLowerCase(); 
 
      return panelHeadingText.indexOf(val) < 0; 
 
     }).hide(); 
 
    }); 
 

 
</script>