javascript - 尝试使用 javaScript setInterval 来替代内容，但它不起作用

Question

我正在尝试替换某些元素的文本并传递一个参数，如 MDN 中所示。但是，它不起作用。问题是我搞乱了 jQuery 和纯 JavaScript 吗？这是我的HTML , 这是我的 CSS这是JavaScript .

$(function() {
    $("#top_navbar").on("show.bs.collapse", function() {
        $("#top_navbar > ul").css({
            "background-color": "black",
            "text-align": "center"
        });
    });

    $("#top_navbar").on("hidden.bs.collapse", function() {
        $("#top_navbar > ul").css("background-color", "transparent");
    });

    var headerStatus = 0;
    var h1Header = $("#header_content > div:first-of-type").filter("h1");
    var h3Header = $("#header_content > div:last-of-type").filter("h3");
    var firstParaHeader = $("#header_content > div:first-child").filter("p:first-of-type");
    var lastParaHeader = $("#header_content > div:first-child").filter("p:last-of-type");

    function changeHeaderContent(num) {
        switch (num) {
            case 0:
                h1Header.innerHTML = "The Trio";
                h3Header.innerHTML = "Creative design studio";
                firstParaHeader.innerHTML = "Creating the brand experience you & your audience deserve with Inbound Marketing.";
                lastParaHeader.innerHTML = "We already work with over 130 clients.";
                headerStatus = 1;
                break;
            case 1:
                h1Header.innerHTML = "Create Brand";
                h3Header.innerHTML = "our true area of expertise";
                firstParaHeader.innerHTML = "We create simple, beautiful, and conversion focus designs for your customers.";
                lastParaHeader.innerHTML = "And delivered more than 210 design projects.";
                headerStatus = 0;
                break;
        }
    }
    setInterval(changeHeaderContent, 5000, headerStatus);
});

Answer 1

我认为 Scott Marcus 的代码片段是正确的。如果你 console.log 你的案例，你会注意到参数显然是按值而不是按引用发送的，因此你总是以案例 0 结尾。这样函数作为闭包传递，对 headerStatus 的引用传递它，而不是在第一个时间间隔只读取一个。

所以:

setInterval(function () {
    changeHeaderContent(headerStatus);
},5000);

对于元素内容，您可能应该使用 jQuery 方法，如 text() 或更好的 html()所以:

case 0:
    h1Header.html("The Trio");
    h3Header.html("Creative design studio");
    ...

case 1:
    h1Header.innerHTML = "Create Brand";
    h3Header.html("our true area of expertise");
    ...

这种方式适用于您想要更改的所有元素。还有关于通过 jQuery 获取元素的问题，我建议使用上下文#header_content:

var h1Header = $('h1', $("#header_content"));
var h3Header = $('h3', $("#header_content"));

我已经像这样在本地测试过它，它对我有用..