我有一个简单的应用程序,旨在过滤列表(显示匹配项并隐藏其余项)

<input>元素上有由输入事件触发的功能。它更改<li>元素的“显示”属性。最后,它向每个<li>添加适当的属性值(块或无)。但是我看不到页面上的任何更改。

这是一个代码:

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';
      }
   });
}


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

javascript - 当我通过JavaScript更改元素的CSS“显示”属性时,页面上没有任何变化-LMLPHP

这是事件发生后元素的屏幕截图:

javascript - 当我通过JavaScript更改元素的CSS“显示”属性时,页面上没有任何变化-LMLPHP

在页面上没有任何变化:

javascript - 当我通过JavaScript更改元素的CSS“显示”属性时,页面上没有任何变化-LMLPHP

最佳答案

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

关于javascript - 当我通过JavaScript更改元素的CSS“显示”属性时,页面上没有任何变化,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48630212/

10-12 13:08
查看更多