用JS過濾HTML串列-有解無憂

我對 HTML 和 JavaScript 不是很熟悉，所以我的學習是基于逆向工程代碼。

我正在使用的代碼根據修改的關鍵字過濾表我還可以將此代碼添加到按鈕并過濾關鍵字我添加了一個非常原始的切換，它可以作業（無論如何切換）。但是，我無法讓表格將所有樣式改回style="Display = "";至少我無法讓它們重新出現？

var myTog = 0;

function myFunction() {
  var ul, li, a, i, txtValue;

  if (myTog == 0) {
    myTog = 1;

    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");

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

  } else {
    alert("test if toggel works");

    // ================
    // Trouble Section:
    // ================

    for (i = 0; i < li.length; i  ) {
      li[i].style.display = "";
    }

    // ===============

    myTog = 0;
  }

}

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>
<button type="button" onclick="myFunction()">Click Me!</button>

uj5u.com熱心網友回復：

您必須定義li = ul.getElementsByTagName("li");if 子句的外部

var myTog = 0;

function myFunction() {
  var ul, li, a, i, txtValue;
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");

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

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>
<button type="button" onclick="myFunction()">Click Me!</button>

uj5u.com熱心網友回復：

如果您嘗試顯示 li，那么您可以使用以下內容：

li[i].style.display = "block";

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/469076.html

標籤：javascript html css 列表筛选

上一篇：NodeJSsetImmediate和私有類方法

下一篇：將字串連接到雙引號內的變數