JavaScript：变量的动态值没有被更新。为什么会这样？答案

【问题标题】：JavaScript: Dynamic value of a variable isn't being updated. Why is that happenning?JavaScript：变量的动态值没有被更新。为什么会这样？
【发布时间】：2015-11-25 22:35:20
【问题描述】：

我最近开始学习 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

【问题讨论】：

标签： javascript jquery variables concatenation dynamic-content

【解决方案1】：

第一次存储 variableB 后，它是一个字符串，更新 variableA 不会更新它。要解决这个问题，请在调用函数时生成变量B：

var variableA  = 1;

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

【讨论】：

【解决方案2】：

如果您希望它在每次调用时都进行迭代，您可以试试这个：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

在函数内移动变量，如下所示：

var variableA  = 1;
var variableB = "<h4>Header will be replaced</h4>";

$('#mainDiv').html(variableB);  

$('#button').click(function(){ 
    addHeader();
});

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

还有 HTML：

<div id="mainDiv"> </div>
<button id="button">clicky</button>

在这里玩一下：
http://jsfiddle.net/66rgnd0k/

【讨论】：