隐藏部分未在实时搜索中列出

Question

我只是隐藏了包含#sec3 id 的section 3。每当我要进行实时搜索时，如果可搜索的内容在第 3 节中，我都会尝试这样做，它将显示或可见。请任何人建议我或帮助我使该内容可见。我只是发布了#sec2和#sec3 css 而不是保留 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

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();
    }
  });
 });
});