Question

我正在我的健身网站上工作，我创建了一个博客页面，现在有很多文章可用，我创建了一个“加载更多”按钮以显示更多文章，脚本运行正常，现在接下来我要添加一个页面顶部的搜索栏，以便用户可以看到他在搜索栏中写的文章。我做了一个脚本，我不知道问题出在哪里

下面给出了代码

现在html代码是：

<input type="text" id="inputarticle" onkeyup="myfunction()" size="162" placeholder="Enter the article name">

<div class="grid-container">
<div class="grid-hidden1">
            <img class="blog-cl-1-image">
            <h2 > <a href="fat.html">Importance of Fat for human Body</a> </h2>
            <h4>August 21 2019</h4>
            <p>When you eat fat in your diet the most important  thing that matters are the type of fat you eat. New research shows that healthy fats are important for optimal health.</p>
        </div>
        <div class="grid-hidden1">
            <img class="blog-cl-2-image">
            <h2> <a href="zinc.html">Role of Zinc in Human Body</a> </h2>
            <h4>August 21 2019</h4>
            <p>Zinc is an essential nutrient that plays an important role in the human body. As your body doesn’t produce zinc so it is essential to take it from food or supplements.</p>
        </div>
</div>

现在javascript是：-

function myfunction() {
  // Declare variables
  var input, filter, ul, h2, a,i, txtValue;
  input = document.getElementById("inputarticle");
  filter = input.value.toUpperCase();
  ul = document.getElementsByClassName("grid-container");
  h2 = ul.getElementsByTagName("h2");

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = h2[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      h2[i].style.display = "";
    } else {
      h2[i].style.display = "none";
    }
  }
}

我不知道问题出在哪里？请帮助

Answer 1

尝试在for循环if语句中更改以下行，并查看其是否有效：

h2[i].style.display = "";

到

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

如果没有完整的HTML文件和逻辑，很难确切知道发生了什么。另外，不确定这是否是错字，但您的HTML缺少第一个示例项目的空缺。

<div class="grid-hidden1">
        <img class="blog-cl-1-image">
        <h2 > <a href="fat.html">Importance of Fat for human Body</a> </h2>
        <h4>August 21 2019</h4>
        <p>When you eat fat in your diet the most important  thing that matters are the type of fat you eat. New research shows that healthy fats are important for optimal health.</p>
    **</div>** <-- MISSING OPENING DIV
    ...

希望这会有所帮助！

如何在博客页面中获取搜索栏以搜索选择性文章？

1 个答案: