Question

我正在编写一个简单的Web应用程序来跟踪和显示一些数据。我有多个html页面，并且有一些Javascript可控制html的功能。

问题在于下面的函数似乎并没有一直运行。

我已经更改了工作流程的一般顺序，并且完成了调试（据我所知）。

    function sidebarColour() {
        let page = document.getElementsByTagName('a');
        let currentURL = window.location.href;
        console.log(page, currentURL);
        for (let tag of page) {
            console.log(tag.href);
            if (tag.href == currentURL) {
                tag.className = 'bar-item button padding blue';
                console.log(tag.href, tag.className);
            } else {
                tag.className = 'bar-item button padding';
            }
        }
    }

    sidebarColour();

代码似乎一直运行，直到到达for循环为止。 console.log不会出现（tag.ref不会出现）如果我将代码复制粘贴到chrome dev-tool上的控制台中，则可能发生CSS更改元素的预期情况。

有什么想法吗？

完整的代码可以在我的GitHub上看到
或运行代码的网站：Website

Answer 1

您网站上的问题是侧边栏是异步获取的。您的include.js中包含以下代码：

function includeHTML() {
    let z, i, elmnt, file, xhttp;
    /* Loop through a collection of all HTML elements: */
    z = document.getElementsByTagName("*");
    for (i = 0; i < z.length; i++) {
        elmnt = z[i];
        /*search for elements with a certain atrribute:*/
        file = elmnt.getAttribute("w3-include-html");
        if (file) {
            /* Make an HTTP request using the attribute value as the file name: */
            xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        elmnt.innerHTML = this.responseText;
                    }
                    if (this.status == 404) {
                        elmnt.innerHTML = "Page not found.";
                    }
                    /* Remove the attribute, and call this function once more: */
                    elmnt.removeAttribute("w3-include-html");
                    includeHTML();
                }
            }
            xhttp.open("GET", file, true);
            xhttp.send();
            /* Exit the function: */
            return;
        }
    }
}

function sidebarColour() {
    let page = document.getElementsByTagName('a');
    let currentURL = window.location.href;
    console.log(page, currentURL);
    for (let tag of page) {
        if (tag.href == currentURL) {
            tag.className = 'bar-item button padding blue';
            console.log(tag.href, tag.className)
        } else {
            tag.className = 'bar-item button padding';
        }
    }
}

includeHTML();
sidebarColour();

将sidebarColour的方法调用移到onreadystatechange的回调中应该可以修复该方法。
这样做：

function includeHTML() {
    let z, i, elmnt, file, xhttp;
    /* Loop through a collection of all HTML elements: */
    z = document.getElementsByTagName("*");
    for (i = 0; i < z.length; i++) {
        elmnt = z[i];
        /*search for elements with a certain atrribute:*/
        file = elmnt.getAttribute("w3-include-html");
        if (file) {
            /* Make an HTTP request using the attribute value as the file name: */
            xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        elmnt.innerHTML = this.responseText;
                        sidebarColour();
                    }
                    if (this.status == 404) {
                        elmnt.innerHTML = "Page not found.";
                    }
                    /* Remove the attribute, and call this function once more: */
                    elmnt.removeAttribute("w3-include-html");
                    includeHTML();
                }
            }
            xhttp.open("GET", file, true);
            xhttp.send();
            /* Exit the function: */
            return;
        }
    }
}

function sidebarColour() {
    let page = document.getElementsByTagName('a');
    let currentURL = window.location.href;
    console.log(page, currentURL);
    for (let tag of page) {
        if (tag.href == currentURL) {
            tag.className = 'bar-item button padding blue';
            console.log(tag.href, tag.className)
        } else {
            tag.className = 'bar-item button padding';
        }
    }
}

includeHTML();

为什么部分功能无法运行？

1 个答案: