更改元素/节点style.display时，dom缺少一些元素

如何解决更改元素/节点style.display时，dom缺少一些元素

我有一个带有(user,id desc,operation_detail,ip_adress,l_date)元素的大型DOM，其中包含成千上万个具有 X 不同的pre属性的span节点。根据用户的操作，我正在将样式（name） X-1 style.display属性更改为name。未更改的none属性的节点数超过1000。但是执行此操作后，页面仅显示几百个未更改的而不是全部。

注意：当节点数较少时，我看不到任何问题。

name

  function filters() {
    var nameElement = document.getElementsByName('filterType');
    let selectedFiltersList = [];
    if (nameElement.length > 0) {
      for (let i = 0; i < nameElement.length; i++) {
        if (nameElement[i].checked) {
          selectedFiltersList.push(nameElement[i].defaultValue);
        }
      }
    }
    if (selectedFiltersList.length > 0) {
    const allFilters = ["Warning","Error","State"];
    const unSelectedFilters = allFilters.filter(
      val => !selectedFiltersList.includes(val),);

    unSelectedFilters.forEach(name => {
      let nameArray = document.getElementsByName(name);
      if (
        nameArray &&
        nameArray.length > 0 &&
        nameArray[0].style.display !== 'none'
      ) {
        nameArray.forEach(elem => (elem.style.display = 'none'));
      }
    });
    } 
    }

解决方法

正如@Mike Kamermans所说：您应该使用一个类（这里hide）来使目标跨度不可见。 name属性cannot be assigned to spans，但您可以改用data-name。

您的市场结构仍然有些“非正统”。我希望您不会在页面的完成版本的<span>中使用<pre>，但是仍然可以在此处演示该原理。

在flt中，

收集所有复选框的值。然后，我通过检查是否可以在forEach中找到它们的#data span，在所有toggle()和hide的类dataset.name上循环（flt）：如果找不到它们，我将“隐藏”该元素，否则将再次删除“隐藏”类。

function filters() {
  let flt=[...document.querySelectorAll('[name=filterType]:checked')].map(f=>f.value);
  [...document.querySelectorAll('#data span')].forEach(s=>
    s.classList.toggle('hide',!flt.includes(s.dataset.name)));
}

.hide {display:none}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Viewer</title>
    <link rel="stylesheet" href="../css/view.css" />
  </head>
  <body>
    <div class="header">
      <div class="filters" onclick="filters()">
        <label><input type="checkbox" name="filterType" value="Warning" checked/>
        Warning</label> &nbsp;
        <label><input type="checkbox" name="filterType" value="Severe" checked/>
        Severe</label> &nbsp;
        <label><input type="checkbox" name="filterType" value="State" checked/> State</label>
      </div>
    </div>
    <div class="output">
<pre id="data"><span class="st" data-name="State"><a href="#!" title="remove line" id="1" onclick="removeLine(1)">X</a> State        ===&gt; hello state
</span>
<span class="wrn" data-name="Warning"><a href="#!" title="remove line" id="2" onclick="removeLine(2)">X</a> Warn        ===&gt; hello warn
</span>
<span class="err" data-name="Severe"><a href="#!" title="remove line" id="3" onclick="removeLine(3)">X</a> Error        ===&gt;  hello error
</span>
....(// thousands of span elements like above)
    </pre>
    </div>
  </body>
</html>

（我调整了您的一些span-（data-）名称，使其与三个复选框相对应价值观。）

更改元素/节点style.display时，dom缺少一些元素

如何解决更改元素/节点style.display时，dom缺少一些元素

解决方法

相关推荐