通过过滤器隐藏元素的javascript

Question

我有一个 html 页面，其中我具有以下结构:

    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<div class="tabella">
    <div class="rigaHead"></div>

            <div class="rigaEven">
                <div class="col1">
                    <p class='room'>XXX</p>
                    <p class='where'>WHERE</p>
                </div>
                <div class="col2 half">
                    <p class='when'>09:00 - 13:00</p>
                </div>
                <div class="col3">
                     <p class="what">YYY</p>
                    <p class="who">PROFESSOR</p>
                </div>
            </div>

            <div class="rigaOdd">
              <div class="col1">
                    <p class='room'>XXX</p>
                    <p class='where'>WHERE</p>
                </div>
                <div class="col2 half">
                    <p class='when'>09:00 - 13:00</p>
                </div>
                <div class="col3">
                     <p class="what">YYY</p>
                    <p class="who">PROFESSOR</p>
                </div>
            </div>

    </div>
</div>

我只想显示类为 RigaEven 或 RigaOdd 的 div 标签谁的标签在图像中突出显示为与搜索字段的那部分相同的文本... 我该怎么办？

Answer 1

你可以这样做:

function search(what){
    var elements = document.querySelectorAll(".rigaEven, .rigaOdd");
    for(var i = 0; i < elements.length;i++){
      var v = elements[i];
      if(what.length == 0 || v.querySelector(".what").textContent.indexOf(what) != -1){
          v.style.display = "block";
      }else{
          v.style.display = "none";
      }
    }
}

<div><input type="text" placeholder="Search what" onkeyup="search(this.value)"/></div>
<div class="rigaEven">
                <div class="col1">
                    <p class='room'>XXX</p>
                    <p class='where'>WHERE</p>
                </div>
                <div class="col2 half">
                    <p class='when'>09:00 - 13:00</p>
                </div>
                <div class="col3">
                     <p class="what">XXX</p>
                    <p class="who">PROFESSOR</p>
                </div>
            </div>

            <div class="rigaOdd">
              <div class="col1">
                    <p class='room'>XXX</p>
                    <p class='where'>WHERE</p>
                </div>
                <div class="col2 half">
                    <p class='when'>09:00 - 13:00</p>
                </div>
                <div class="col3">
                     <p class="what">YYY</p>
                    <p class="who">PROFESSOR</p>
                </div>
            </div>

要使搜索不区分大小写，您可以使用 v.querySelector(".what").textContent.toLowerCase().indexOf(what.toLowerCase())