javascript - 实时搜索中没有列出隐藏的部分？

Question

我只是隐藏了包含 #sec3 id 的 section 3。如果可搜索内容在第 3 节中，我会在进行实时搜索时尝试这样做，它将被显示或可见。请任何人建议我或帮助我使该内容可见。我只是发布了 #sec2 和 #sec3 css 而不是 hold css，因为它超过了写入限制。所以请帮助我。提前致谢....

这是html

<nav class="navbar navbar-inverse navbar-fixed-top">

            <div class="container">

                <div class="navbar-brand" onclick="w3_open()"><i class="fas fa-bars"></i></div>

                <div class="nav navbar-nav navbar-right">
                    <input type="text" class="live-search-box" placeholder="Search...">
                </div>  

                <div class="w3-overlay w3-animate-opacity" onclick="w3_close()" style="cursor:pointer; display:none" id="myOverlay"></div>  

                <center>
                    <div>
                        <img src="logo/mask.png">
                        <h1>My Website</h1>
                    </div>
                </center>               
            </div>          
        </nav>

        <div class="w3-sidebar w3-bar-block w3-border-right w3-animate-left" style="display:none;" id="mySidebar">
            <button onclick="w3_close()" class="w3-bar-item w3-large">Close &times;</button>
            <a href="#" class="w3-bar-item w3-button">Link 1</a>
            <a href="#" class="w3-bar-item w3-button">Link 2</a>
            <a href="#" class="w3-bar-item w3-button">Link 3</a>
            <a href="#" class="w3-bar-item w3-button">Link 4</a>
            <a href="#" class="w3-bar-item w3-button">Link 5</a>
            <a href="#" class="w3-bar-item w3-button">Link 6</a>
        </div>

        <div class="w3-overlay w3-animate-opacity" onclick="w3_close()" style="cursor:pointer; display:none" id="myOverlay"></div>
        <!-- Page Content -->
        <section id="sec2">
          <div class="container-fluid">
            <div class="container">
              <div class="row">
                <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail animated slideInRight">
                    <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="John Doe" style="width:100%">
                      <h4>John Doe</h4> 
                  </div>              
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail animated slideInRight">
                    <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Steve John" style="width:100%">
                      <h4>Steve John</h4>
                  </div>              
                </div> 
                <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail animated slideInRight">
                    <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="John Cenna" style="width:100%">
                      <h4>John Cenna</h4> 
                  </div>              
                </div> 
                <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail animated slideInRight">
                    <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Mark William" style="width:100%">
                      <h4>Mark William</h4>               
                  </div>              
                </div> 
                <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail animated slideInRight">
                    <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="William Wordssmith" style="width:100%">
                      <h4>William Wordssmith</h4> 
                  </div>              
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail animated slideInRight">
                    <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Jason Wathson" style="width:100%">
                      <h4>Jason Wathson</h4>
                  </div>              
                </div> 
                <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail animated slideInRight">
                    <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Jimmy Coogan" style="width:100%">
                      <h4>Jimmy Coogan</h4> 
                  </div>              
                </div> 
                <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail animated slideInRight">
                    <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Mark Zuckerberg" style="width:100%">
                      <h4>Mark Zuckerberg</h4>               
                  </div>              
                </div>  
              </div>
            </div>
          </div>
        </section>

        <section id="sec3">
          <div class="container-fluid">
            <div class="container">
              <div class="row">
                <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                    <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Hrithik Roshan" style="width:100%">
                      <h4>Hrithik Roshan</h4>
                  </div>              
                </div> 
                <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                    <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Salman Khan" style="width:100%">
                      <h4>Salman Khan</h4> 
                  </div>              
                </div> 
                <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                    <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Shahid Kapoor" style="width:100%">
                      <h4>Shahid Kapoor</h4>               
                  </div>              
                </div> 
                <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                    <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Dibendu Mondal" style="width:100%">
                      <h4>Dibendu Mondal</h4> 
                  </div>              
                </div>
                <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                    <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Sudip Barik" style="width:100%">
                      <h4>Sudip Barik</h4>
                  </div>              
                </div> 
                <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                    <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Masum Abdulla" style="width:100%">
                      <h4>Masum Abdulla</h4> 
                  </div>              
                </div> 
                <div class="col-xs-6 col-sm-3 col-md-3">
                  <div class="card thumbnail">
                    <img class="myImg" src="https://pbs.twimg.com/profile_images/831993825635745796/HnVmB0-k_400x400.jpg" alt="Debabrata Maji" style="width:100%">
                      <h4>Debabrata Maji</h4>               
                  </div>              
                </div> 
              </div>
            </div>
          </div>
        </section>

CSS

#sec2{
  position: relative;
  width: 100%;
  top: 80px;
  display: block;
}

#sec3{
  position: relative;
  width: 100%;
  top: 80px;
  display: none;
}

查询

jQuery(document).ready(function($) {

  $('.live-search-box').on('keyup', function() {

    var searchTerm = $(this).val().toLowerCase();
      $('.myImg').each(function(idx, item) {
        var alt = $(item).attr("alt").toLowerCase();

        if (alt.indexOf(searchTerm) >= 0 ||searchTerm.length < 1) {
            $(item).parent().parent().show();
        } else {
            $(item).parent().parent().hide();
        }

      });

  });

});

Answer 1

在你的 js 上试试这个:

jQuery(document).ready(function($) {

$('.live-search-box').on('keyup', function() {

var searchTerm = $(this).val().toLowerCase();
  $('.myImg').each(function(idx, item) {
    var alt = $(item).attr("alt").toLowerCase();

    if (alt.indexOf(searchTerm) >= 0 ||searchTerm.length < 1) {

        $(item).parentsUntil('#sec3').parent().find('#sec3').hide();

        $(item).parent().parent().show();

    } else {      
    $(item).parentsUntil('#sec3').parent().find('#sec3').show();

        $(item).parent().parent().hide();

    }

  });

 });

});