JavaScript:未更新变量的动态值。为什么会这样？

Question

我最近开始学习 JavaScript 和 jQuery，我可能会遇到新手错误。我试图让我的代码尽可能易于阅读，所以我决定将一大块 HTML 与一个变量连接起来存储在另一个变量中。串联变量包含一个数值，每次我使用包含所有内容的变量、html 和其他变量时，该数值都会更新。

像这样:

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

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

每当我稍后在代码中调用该函数时，它总是打印“Header number 1”，我怎样才能让它打印正确/所需的值？

标题编号 1

标题编号 2

标题编号 3

Answer 1

第一次存储 variableB 后它是一个字符串，更新 variableA 不会更新它。为了解决这个问题，每当你调用函数时生成变量B:

var variableA  = 1;

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