JavaScript:变量的动态值没有被更新。为什么会发生这种事？

Question

我最近开始学习JavaScript和jQuery，我可能被一个新手错误困住了。我试图让代码尽可能容易阅读，所以我决定将HTML块与另一个变量连接起来。级联变量包含一个数值，每当我使用包含所有内容、html和其他变量的变量时，这个数值就会更新。

就像这样：

var variableA  = 1;
var variableB = "<h4>Header number : "+ variableA +"</h4>";

var addHeader = funtcion(){
  $('#mainDiv').prepend(variableB);
  variableA++;
};

当我稍后在代码中调用该函数时，它总是打印“头号1"，如何使它打印正确的/所需的值？

报头编号1

标头编号2

标头编号3

Answer 1

在您第一次存储variableB之后，它是一个字符串，而更新variableA不会更新它。为了解决这个问题，每当调用函数时都要生成variableB：

var variableA  = 1;

var addHeader = funtcion(){
  var variableB = "<h4>Header number : "+ variableA +"</h4>";
  $('#mainDiv').prepend(variableB);
  variableA++;
};

Answer 2

如果您想每次调用它时迭代它，可以尝试如下：

var headerIndex = 1;
var addHeader = function(){
  $('#mainDiv').prepend("<h4>Header number: " + (headerIndex++) + "</h4>");
};

示例：http://codepen.io/anon/pen/OyJpQq

您可能希望使用$('#mainDiv').html(...)而不是prepend(...)来让它完全更新div的内容.

Answer 3

问题是variableB是字符串。它不是一个引用，所以在函数中使用var variableB = "<h4>Header number : "+ variableA +"</h4>";来创建新的字符串--每次函数调用