javascript - 当我通过 javascript 更改元素的 css "display"属性时，页面上没有任何变化

Question

我有一个用于过滤列表的简单应用程序(显示匹配的元素并隐藏其余元素)

在<input> 上有一个由'input' 事件触发的函数。元素。它更改了 <li> 的“显示”属性元素。最后它为每个 <li> 添加适当的属性值( block 或无) .但是我没有在页面上看到任何更改。

代码如下:

function filterInput(e) {
   //value from <input> element
   let keyValue = e.target.value;
   //all items from list
   let listOfTasks = document.querySelectorAll('.list-group-item');
   listOfTasks.forEach(function (task) {
      const item = task.firstChild.textContent;
      if(~item.indexOf(keyValue)){
         task.style.display = 'block';
      } else {
         task.style.display = 'none';
      }
   });
}

这是事件发生前的元素截图:

这是事件后元素的截图:

页面上没有任何变化:

Answer 1

我最好的猜测是“.list-group-item”的 CSS 具有“display: block !important”，它优先于内联样式。因为内联样式被赋值了，但是没有生效...