html concatenation in loop syntax error: unexpected identifier (jquery+html+php)

Question

我试图在循环中的变量内连接 html 并填充 return。但我得到

error Uncaught SyntaxError: 意外的标记 +=

我的代码。

<a style="cursor: pointer" id="addmore">More Entree ?</a>

<?php $json = JSON_encode($entree); ?>

<script>

function populate() {
 var json = <?php echo $json; ?>;
  for (var i = 0; i < json.length; i++) {
   var obj = json[i];
   var option += '<option value="' + obj.id + '">' + $.trim(obj.title) + '</option>';
  }
return option;
}

$(function (c) {
   $("a#addmore").click(function () {
    console.log(populate());
     //$("p").append('<select>' + populate() + '<select>');
    });

</script>

Answer 1

您不能在同一范围内反复重新声明您的变量并期望它添加到它以前的值。

你需要这样的东西：

function populate() {
  // only declare the variables once
  var json = <?php echo $json; ?>,
      option = '',
      obj;

  for (var i = 0; i < json.length; i++) {
    obj = json[i];
    option += '<option value="' + obj.id + '">' + $.trim(obj.title) + '</option>';
  }

  return option;
}

编辑：参见an example here。

Answer 2

语法错误并不是真正由于声明变量的位置造成的。如果我们将“+=”更改为“=”，代码仍将 运行 无一例外（尽管结果无效）。

var option = '<option value="' + obj.id + '">' + $.trim(obj.title) + '</option>';

简单地说，声明一个变量并同时应用一个+=运算符是无效的JavaScript。

但是为什么呢？

根据the MDN doc for 'var'：

var varname1 [= value1 [, varname2 [, varname3 ... [, varnameN]]]];

此处，“=”被明确列为 'var' 和第一个值之间的唯一有效符号。

那是因为在这种情况下，“=”代表初始化，而不是赋值。

同样，来自MDN：

Variable declarations, wherever they occur, are processed before any code is executed.

这是一个微妙但重要的区别：

初始化发生在预执行阶段，而“+=”（执行加法，然后分配结果）算作 "executing code"。并且因为所有变量都必须在任何代码执行之前被解析，所以 += 直到 所有变量都被初始化后才会出现！你有第二十二条军规！

因此，在 var 声明之后，只有“= x”、逗号和更多变量声明在语句结束之前有效；已达到。