Javascript 为每个列表动态筛选列表

我有一个多过滤器列表，我想在上面放置一个输入搜索过滤器，如何为每个列表过滤列表，而不是将代码相乘以生成每个列表的函数，我将放置我尝试的：

function FilterPret() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('pretfilter');
filter = input.value.toUpperCase();
ul = document.getElementById("filter-ul-pret");
li = ul.getElementsByTagName('li');

for (i = 0; i < li.length; i++) {
  a = li[i].getElementsByTagName("label")[0];
  txtValue = a.textContent || a.innerText;
  if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

函数FilterPret（）{
//声明变量
var输入、滤波器、ul、li、a、i、TXT值；
输入=document.getElementById（'pretfilter'）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“过滤器ul pret”）；
li=ul.getElementsByTagName（'li'）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}

所以我不想为每个过滤器列表创建9个函数，而是想创建1个，因为这些过滤器都是从后端创建的

更新：Html

<aside class="sidebar-tag filter tags shop by price ">
  <div class="widget">
     <h4>
      <span>Duritate </span>
      <a href="javascript:void(0)" class="clear" style="display:none">
      <i class="fas fa-times"></i>
      </a>
    </h4>
 <div class="widget-content">
  <input type="text" id="duritatefilter" class="myfilterinput" onkeyup="FilterPret()" placeholder="Cauta duritatea">
 <ul class="scroll-basic">
  <li><label for="val1">
   <input type="checkbox" id="val1" value="100-300"><span>Moale</span></label>
  </li>
  <li><label for="val1"><input type="checkbox" id="val1" value="100-300">
      <span>Mediu</span></label>
  </li>
  <li><label for="val1"><input type="checkbox" id="val1" value="100-300">
   <span>Tare</span>  </label>
  </li>
 </ul>
</div>

摩尔


麦迪乌


杂草

---

对每个

ul

使用不同的

id

，并在keyup事件中将其作为参数传递给

FilterPret（）

函数。然后不是静态值

filter ul pret

而是传递

id

并收集列表项。

这应该是可能的，但我们需要查看HTML以帮助您，这意味着我需要为每个id创建函数，因为我不能在页面上有多个id，对吗？在一个页面中有多个id没有限制。ID属性的值将不同。如果设置ID有问题，您可以使用任何其他属性，甚至自定义属性，如

data someName

，并将其用于唯一标识

ul

，这就是我发布此问题的原因，我想通过事件定位在子ul上搜索，并在不使用id的情况下动态过滤ul中的li，因为我有多个带过滤的字段。谢谢。@Edward这不是使用的方法，因为您将不得不为每个

id

复制代码。使用公共类并泛化行为。正如我在问题下面的评论中所说，我们可以给你一个例子来说明如何做到这一点，但是我们需要看到你的HTML。你的HTML在图片的下面。