无法在JavaScript中筛选项目

因此，我试图为这个存储列表创建一个过滤器，这样只有内容等于输入框值的存储才会显示。不幸的是，我的过滤器不能正常工作。首先，我在输入框中键入的任何内容都会导致我的所有存储元素添加“display”类，这会导致我的项目接收样式“display:none；”。其次，它不是每次按下一个键都会更新

HTML:

JavaScript:

var search = document.getElementById('search');
var stores = document.querySelectorAll('.store');

search.addEventListener('keyup', function (e) {

    var data = e.target.value.toLowerCase();

    stores.forEach(function(store) {

        var spans = document.querySelectorAll('.store-info');

        for(var i = 0; i < spans.length; i++) {
            if (spans[i].innerText.toLowerCase() != data) {
                store.classList.remove('display');
            } else {
                store.classList.add('display');
            }
        }

    });

});

---

如果我正确理解您的问题，您可以对javascript进行以下更改，以解决您面临的问题。请参阅代码中的注释以了解发生的情况：

search.addEventListener('keyup', function (e) {

    var query = e.target.value.toLowerCase();

    if (search.value.length >= 0) {
        search.classList.add('focused');
        label.classList.add('focused');
    } else {
        search.classList.remove('focused');
        label.classList.remove('focused');
    }

  // recommend performing this query in the keyup event to ensure
  // that you're working with the most up to date state of the DOM
  var stores = document.querySelectorAll(".store");

  stores.forEach(function(store) {

    // query .store-info from current store
    var spans = store.querySelectorAll(".store-info");

    // hide the store by default
    store.style.display = 'none';

    for (var i = 0; i < spans.length; i++) {

      var storeInfoText = spans[i].innerText.toLowerCase();

      // consider revising search logic like so
      if (storeInfoText.indexOf(query) !== -1 || !query) {

        // display the store if some match was found
        store.style.display = 'block';
      }
    }

    });

});

链接到

var search=document.getElementById'search'； var stores=document.querySelectorAll.store'

 search.addEventListener('keyup', function (e) {

var data = e.target.value.toLowerCase();

stores.forEach(function(store) {

    var spans = document.querySelectorAll('.store-info');

     spans.filter(span=>{
      if(span.innerText.toLowerCase().includes(data)){
       store.classList.toggle('display');


     }else{store.classList.toggle('display')

       })

   });

---

显示：无不是类。这是显示类的副作用吗？我理解这一点，但我有一个名为“display”的类，它只有样式显示：none。抱歉，这让人困惑。将进行编辑。不幸的是，这不起作用。这并没有导致所有元素都删除display类，但它没有正确过滤..display{display:none；}很抱歉造成混淆。我本来要显示：block，但在发布之前将其更改为显示：none。嗯，仍然不起作用。本质上，无论我键入什么，都会调出所有存储，然后在删除值时不更新列表。例如，如果我输入'80'，我正在测试的三个存储中只有一个存储具有该存储编号，那么这三个存储都将填充并显示。如果我将输入内容删除为nothing，则所有内容都会继续显示。我检查了，但不幸的是没有。

I think your issue with it showing everything is because of the add remove... if a store already has display it will re add it and then only remove it once where as if it doesn’t you will get an error so try toggle 

 search.addEventListener('keyup', function (e) {

var data = e.target.value.toLowerCase();

stores.forEach(function(store) {

    var spans = document.querySelectorAll('.store-info');

     spans.filter(span=>{
      if(span.innerText.toLowerCase().includes(data)){
       store.classList.toggle('display');


     }else{store.classList.toggle('display')

       })

   });