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"，我怎样才能让它打印 correct/desired 值？

Header数1

Header数2

Header数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

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

Answer 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/

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

JavaScript: Dynamic value of a variable isn't being updated. Why is that happenning?

javascript

variables

jquery

concatenation

dynamic-content