时间戳

首页 > 解决方案 > 根据文本输入过滤 div

javascript - 根据文本输入过滤 div

问题描述

我的过滤器 div 有 2 个布局。1 个专用于桌面设备，1 个专用于移动设备。我希望它根据用户提供的文本输入过滤项目。这是输入 div

<div class="search-wrapper">
  <input class="searchInput TextFilter-mobile" type="text" onkeyup="searchFunction()" placeholder="Zoeken..">
</div>

现在我在正确的设备上出现了 2 个单独的 div：首先是移动设备：

  <div class="card card-filterDiv zuivel special">
    <div class="card-horizontal">
      <div class="image-wrapper">
         <img class="clip-product-img-mobile" src="{% static 'main/images/img3.jpg' %}" alt="Card image cap">
         <button class="btn btn-success">
           <i class="fas fa-cart-plus add-to-cart-icon"></i>
         </button>
      </div>
      <div class="card-body">
       <h2 class="food card-title mr-0" style=">Bokkenpootjes</h2>
      </div>
    </div>
  </div>

这是桌面的：

<div class="card card-filterDiv special zuivel">
  <img class="card-img-top clip-product-img-desktop" src="{% static 'main/images/img3.jpg' %}" alt="Card image cap">
    <button class="btn btn-success">
      <i class="fas fa-cart-plus add-to-cart-icon""></i>
    </button>
  <div class="card-body">
     <h2 class="food card-title mr-0">Bokkenpootjes</h2>
  </div>
</div>

我做了一个处理逻辑的函数：

function searchFunction() {
  // necessary variables
  var input, filter, card, h2, a, i, txtValue;
  input = document.querySelector(".searchInput");
  filter = input.value.toUpperCase();
  cardfilter = document.getElementsByClassName('card-filterDiv');


  // Loop through all cards, and hide those who don't match the search query at h2 Tag
  for (i = 0; i < cardfilter.length; i++) {
    a = cardfilter[i].getElementsByTagName("h2")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      cardfilter[i].style.display = "";
    } else {
      cardfilter[i].style.display = "none";
    }
  }
}

它可以在移动 HTML 上正常工作，但不能在桌面上（第二个 1）。我没有错误，一切似乎都很好。我错过了什么？

标签： javascripthtmlfilterfunction

解决方案

解决它。js 无法处理 1 个函数上的两个单独的输入字段。为桌面和移动设备制作了文本输入。我的错！

推荐阅读