1

我正在创建一个模拟博客，我将在其中通过 JavaScript 文件附加帖子。我目前已对其进行设置，以便搜索按钮仅在搜索栏中显示具有相同文本的帖子。现在，我希望帖子突出显示找到的单词。

HTML：

<div id= "custom_blog_div"></div>

JS：

if (document.getElementById("custom_blog_div")) {

    //Blog Post 2
    var post_2_div = document.createElement("div");

    post_2_div.setAttribute("id", "post_2_div");
    post_2_div.setAttribute("class", "post_div");

    custom_blog_div.appendChild(post_2_div);

    // Header
    var post_2_Header = document.createElement("h2");
    var post_2_Header_Text = document.createTextNode("Welcome, and Pardon the Construction!");

    post_2_Header.setAttribute("class", "blog_post_header");
    post_2_Header.appendChild(post_2_Header_Text);
    post_2_div.appendChild(post_2_Header);

    // Date
    var post_2_Date = document.createElement("p");
    var post_2_Date_Text = document.createTextNode("January 2, 2018 12:00 am");

    post_2_Date.setAttribute("class", "blog_post_date");
    post_2_Date.appendChild(post_2_Date_Text);
    post_2_div.appendChild(post_2_Date);

    // Blog
    var post_2_Blog = document.createElement("p");
    var post_2_Blog_Text = document.createTextNode("This is a Left Image:");
    var post_2_Blog_Image_1 = document.createElement("img");

    post_2_Blog.setAttribute("class", "blog_post_text");
    post_2_Blog_Image_1.setAttribute("class", "Left_Image");
    post_2_Blog_Image_1.setAttribute("width", "100px");
    post_2_Blog_Image_1.setAttribute("src", "./series images/main series/spirit legends issue 5/Spirit Legends 5 - Cover.jpg")

    post_2_Blog.appendChild(post_2_Blog_Text);
    post_2_Blog.appendChild(post_2_Blog_Image_1);
    post_2_div.appendChild(post_2_Blog);

    // Blog Post 1
    var post_1_div = document.createElement("div");

    post_1_div.setAttribute("id", "post_1_div");
    post_1_div.setAttribute("class", "post_div");

    custom_blog_div.appendChild(post_1_div);

    // Header
    var post_1_Header = document.createElement("h2");
    var post_1_Header_Text = document.createTextNode("Welcome, and Pardon the Construction!");

    post_1_Header.setAttribute("class", "blog_post_header");
    post_1_Header.appendChild(post_1_Header_Text);
    post_1_div.appendChild(post_1_Header);

    // Date
    var post_1_Date = document.createElement("p");
    var post_1_Date_Text = document.createTextNode("January 2, 2018 12:00 am");

    post_1_Date.setAttribute("class", "blog_post_date");
    post_1_Date.appendChild(post_1_Date_Text);
    post_1_div.appendChild(post_1_Date);

    // Blog
    var post_1_Blog = document.createElement("p");
    var post_1_Blog_Text = document.createTextNode("Hi, and welcome to the official Spirit Legends website! The site is live in order to test out certain things, but as you can see, it is very much incomplete. Please look forward to the complete site in the future!");

    post_1_Blog.setAttribute("class", "blog_post_text");
    post_1_Blog.appendChild(post_1_Blog_Text);
    post_1_div.appendChild(post_1_Blog);

}

// Search Bar button
document.getElementById("search_news_button").onclick = function() {

    var all_blogs = document.getElementById("custom_blog_div").querySelectorAll(".post_div");
    var text_field = document.getElementById("search_news_button_text").value.toLowerCase();
    var custom_blog = document.getElementById("custom_blog_div");

    // Restore all Blog Posts before searching

    for (i = 0; i < all_blogs.length; i++) {
        if (all_blogs[i].style.display === "none") {
            all_blogs[i].style.display = "inline";
        }
    }

    // Loop through all Blog posts

    for (i = 0; i < all_blogs.length; i++) {

        // Display all Blog posts containing the text in the Search Bar
        if (all_blogs[i].innerText.toLowerCase().includes(text_field) === true) {

            all_blogs[i].style.display = "inline";

            var x = "";
            for (x = 0; x < custom_blog.innerText.length; x++) {
                if (custom_blog[x].innerText.toLowerCase().includes(text_field) === true) {
                    x = custom_blog[x].innerText.toLowerCase();
                    x.style.backgroundColor = "yellow";
                }
            }

            // Highlight the found text in each blog post
            var x = "";
            for (x = 0; x < custom_blog.innerText.length; x++) {
                if (custom_blog[x].innerText.toLowerCase().includes(text_field) === true) {
                    x = custom_blog[x].innerText.toLowerCase();
                    x.style.backgroundColor = "yellow";
                }
            }

            // Otherwise, if no Blog posts contain the text in the Search Bar or if Search Bar is empty, display the default
        } else {
            all_blogs[i].style.display = "none";
        }
    }
}

所以，就像我说的，博客正在运行，搜索按钮正在运行，但我不知道如何突出显示搜索到的单词。目前，此代码导致控制台告诉我“TypeError：custom_blog[x] 未定义”。

而且，如果有帮助，该网站是http://spiritlegendsofficial.com/，但尚未添加此功能。尽管您可以在那里查看该站点的其余代码并获取此模拟博客的一些上下文。

谢谢！

4

1 回答 1

1

假设custom_blog是一个 HTMLElement 类型，custom_blog[0]将表示该 HTMLElement 的第一个子节点。如果您检查您的变量custom_blog是否已在 javascript 控制台中定义，但custom_blog[x]未定义，则基本上意味着您<div id= "custom_blog_div"></div>没有子元素。

我认为您的问题出在循环中的某个地方，该循环正在抓取您的文本以进行突出显示。您正在检查字符串的长度，但在循环中，您试图在可能没有子节点的情况下定位子节点。您可能希望更改for循环的条件以继续基于节点数：

if (custom_blog.hasChildNodes()) {
  var children = custom_blog.childNodes;

  for (x = 0; x < children.length; x++) {
    if (children[x].innerText.toLowerCase().includes(text_field) === true) {
      x = children[x].innerText.toLowerCase();
      x.style.backgroundColor = "yellow";
    }
  }
}

有关更多信息childNodes：https ://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

于 2018-08-08T15:49:14.667 回答