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

您的setInterval指令实际上只执行一次。在该时间点，headerStatus为0，因此每次调用changeHeaderContent时都会使用该值。

为了正确地将值传递给函数以便在每次调用时更新值，需要调整语法，以便调用一个函数来调用您真正想要使用您需要传递给的参数调用的函数那。这将导致在headerStatus周围形成一个闭包，并且在每次调用时你都不会失去它的价值。

调整语法允许changeHeaderContent关闭headerStatus，然后您可以获得关闭的好处。

setInterval(function(){
   // Call changeHeaderContent and pass the value of headerStatus to it:
   changeHeaderContent(headerStatus);
}, 5000);

以下是两种不同语法版本如何产生不同结果的示例（请参阅内联注释以获得解释）：

＆＃13;

(function(){
  var headerStatus = 0;

  function changeHeaderContent(num) {
    
    // Because headerStatus is used in this nested function and because it was declared
    // in a higher order function, there is a closure around headerStatus (this makes
    // headerStatus a "free variable"). However, the closure will only cause side-effects
    // if this nested funciton "outlives" its parent function's lifetime.
    
    switch (num) {
      case 0:
        headerStatus = 1;
        break;
      case 1:
        headerStatus = 0;
        break;
      }
    console.log("headerStatus is now: " + headerStatus);
  }
  
  // Now that the nested function has termintated and we are back in the higher order
  // function's scope, the following syntax runs without any closures. Whatever the value of
  // headerStatus is, that value will be passed to the next invocation of changeHeader.
  
  // Based on the code, the value of headerStatus will be 0 (changeHeaderContent hasn't 
  // executed yet) and so changeHeaderContent will change it to 1. BUT... each time 
  // changeHeaderContent runs it won't be passed the updated value of headerStatus, this
  // syntax just passes it once and that original value is used for each subsequent invocation.
  
  // So, every time chagneHeaderContent is run, it's run with the original value of 
  // headerStatus, which was 0. Therefore, each invocation of changeHeaderContent will 
  // change it to 1.
  setInterval(changeHeaderContent, 1000, headerStatus);

}());

＆＃13;

现在使用建议的代码：

＆＃13;

(function(){
  var headerStatus = 0;

  function changeHeaderContent(num) {
   
    switch (num) {
      case 0:
        headerStatus = 1;
        break;
      case 1:
        headerStatus = 0;
        break;
      }
    console.log("headerStatus is now: " + headerStatus);
  }
  

  setInterval(function(){
    // Because the function that will be executed every 5 seconds contains a reference to
    // headerStatus (a free variable) and that function WILL outlive the higher order function
    // where headerStatus was declared, it forms a closure around it and EACH time the 
    // function runs, it will use the last known value of headerStatus, thus allowing the
    // old value to be used in determining the new value.
    changeHeaderContent(headerStatus)
  }, 1000);

}());

＆＃13;

Answer 2

我认为Scott Marcus的代码片段是正确的。如果你控制.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"));

我已经在本地测试了它，它对我有用..

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

2 个答案: