根据文本输入过滤 div

Question

我的过滤器有 2 个布局 div。 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）。我没有收到任何错误，一切似乎都很好。我错过了什么？

Answer 1

尝试验证您的代码。

在移动版中，h2 上有一个没有关闭双引号的样式属性。

在桌面一上，您又添加了一个双引号。

否则，JS 似乎工作正常。 :)

验证码：

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

Answer 2

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

根据文本输入过滤 div

Filter divs based on text input

javascript

html

filterfunction