jquery - JQuery如何不对隐藏项目应用过滤器

Question

所以我做了3个按钮来隐藏div，我还做了一个文本框来过滤里面的文本，但是例如我隐藏了A然后在搜索中我查找它显示的A？它不应该被显示，因为它已经被隐藏了！有任何想法吗？

$(document).ready(function(){
    
    var $btns = $('').click(function() {
      })
    
    var $search = $("#search").on('input',function(){
        $btns.removeClass('active');
        var matcher = new RegExp($(this).val(), 'gi');
        $('.box').show().not(function(){
          return matcher.test($(this).find('.h5text').text())
        }).css("display","none")
        $('.box').each(function()
        {
    	  var html = $(this).find('.h5text').text();
          var text = $("#myins").val();
          var index = html.toLowerCase().indexOf(text.toLowerCase());
          if (index >= 0) { 
            html = html.substring(0,index) + "<span style='background-color: yellow;'>" +html.substring(index,index+text.length) + "</span>" + html.substring(index + text.length);
            $(this).find('.h5text').html(html);
          }
        })
     })
     
     $("#a").click(function(){
     	$(".a").hide();
     });
     $("#b").click(function(){
     	$(".b").hide();
     });
     $("#c").click(function(){
     	$(".c").hide();
     });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="a" type="button">Hide A</button>
<button id="b" type="button">Hide B</button>
<button id="c" type="button">Hide C</button>
<br><br>
<input type="text" id="search">
<br><br>
<div class="box a">
<p class="h5text">This is A</p>
</div>
<div class="box b">
<p class="h5text">This is B</p>
</div>
<div class="box c">
<p class="h5text">This is C</p>
</div>

标签： jqueryhtml

Answer 1

你可以removeClass("h5text")排队你隐藏。

$(document).ready(function(){
    
    var $btns = $('').click(function() {
      })
    
    var $search = $("#search").on('input',function(){
        $btns.removeClass('active');
        var matcher = new RegExp($(this).val(), 'gi');
        $('.box').show().not(function(){
          return matcher.test($(this).find('.h5text').text())
        }).css("display","none")
        $('.box').each(function()
        {
    	  var html = $(this).find('.h5text').text();
          var text = $("#myins").val();
          var index = html.toLowerCase().indexOf(text.toLowerCase());
          if (index >= 0) { 
            html = html.substring(0,index) + "<span style='background-color: yellow;'>" +html.substring(index,index+text.length) + "</span>" + html.substring(index + text.length);
            $(this).find('.h5text').html(html);
          }
        })
     })
     
     $("#a").click(function(){
     	$(".a").hide();
        $(".a .h5text").removeClass("h5text");

     });
     $("#b").click(function(){
     	$(".b").hide();
        $(".b .h5text").removeClass("h5text");
     });
     $("#c").click(function(){
     	$(".c").hide();
        $(".c .h5text").removeClass("h5text");
     });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="a" type="button">Hide A</button>
<button id="b" type="button">Hide B</button>
<button id="c" type="button">Hide C</button>
<br><br>
<input type="text" id="search">
<br><br>
<div class="box a">
<p class="h5text">This is A</p>
</div>
<div class="box b">
<p class="h5text">This is B</p>
</div>
<div class="box c">
<p class="h5text">This is C</p>
</div>