Question

我正在为一个较大的项目工作一个表构造函数，但是我尝试发送给构造函数的内容中的变量在发送之前进行评估。这是一个应该显示我的问题的函数的缩减版本：

x = 0;

tableConstructor(["<p>" + x + "</p>", "<div>" + x + "</div>"]);

function tableConstructor (tableContent) {
    for (x = 0; x < 2; x++) {
        window["row" + x] = tableContent[x];

        console.log(window["row" + x]);
    }
}

输出结果为：

<p>0</p>
<div>0</div>

但我想要的是：

<p>0</p>
<div>1</div>

任何人都可以帮助我吗？

Answer 1

传递参数时使用++x或x++
"<p>" + (x++) + "<p/>"

Post-increment返回原始值的副本。

使用increment operators：

var y = 0;

function tableConstructor(tableContent) {
  for (var x = 0; x < 2; x++) {
    window["row" + x] = tableContent[x];
    console.log(window["row" + x]);
  }
}
tableConstructor(["<p>" + y + "<p/>", "<div>" + (++y) + "<div/>"]);

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

使用DOM Api：

var y = 0;
function tableConstructor(tableContent) {
  for (var x = 0; x < tableContent.length; x++) {
    var div = document.createElement('div');
    div.innerHTML = tableContent[x];
    var elem = div.firstChild;
    elem.innerHTML = x;
    var wanted = elem.outerHTML;
    window["row" + x] = wanted;
    console.log(window["row" + x]);
  }
}
tableConstructor(["<p>" + y + "<p/>", "<div>" + y + "<div/>"]);

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

使用正则表达式（替换digit）：

var y = 0;

function tableConstructor(tableContent) {
  for (var x = 0; x < 2; x++) {
    window["row" + x] = tableContent[x].replace(/\d/, x);
    console.log(window["row" + x]);
  }
}
tableConstructor(["<p>" + y + "<p/>", "<div>" + (++y) + "<div/>"]);

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

Answer 2

您自己的示例存在的问题是，在x仍为0的那一刻，您的数组中的字符串就会被创建。之后更改x并没有多大帮助。

这是一个非常过分的例子来做事情，在循环中有一个单独的x，并且在＃34;内部＆＃34;：

＆＃13;

function createEntryBuilder() {
  // This is a *different* `x` from the one in the for loop.
  var x = 0;
  
  return function(tagName) {
    var tag = document.createElement(tagName);
    tag.innerHTML = x;
    x = x + 1;
    return tag;
  }
}

var builder = createEntryBuilder();

tableConstructor(["p", "div"]);

function tableConstructor (tableContent) {
    for (var x = 0; x < 2; x++) {
        var element = builder(tableContent[x]);
        window["row" + x] = element;
        console.log(window["row" + x]);
        document.body.appendChild(element);
    }
}

＆＃13;

p { background: pink; }
div { background: khaki; }

＆＃13;

如果您希望使用循环编号，您可以将其更改为：

＆＃13;

function createEntryBuilder() {
  return function(tagName, x) {
    var tag = document.createElement(tagName);
    tag.innerHTML = x;
    x = x + 1;
    return tag;
  }
}

var builder = createEntryBuilder();

tableConstructor(["p", "div"]);

function tableConstructor (tableContent) {
    for (var x = 0; x < 2; x++) {
        var element = builder(tableContent[x], x);
        window["row" + x] = element;
        console.log(window["row" + x]);
        document.body.appendChild(element);
    }
}

＆＃13;

p { background: pink; }
div { background: khaki; }

＆＃13;

Answer 3

如果您使用某种模板，如下所示：

function tableConstructor (tableContent) {
    for (var x = 0; x < tableContent.length; x++) {
        window["row" + x] = tableContent[x].replace("{x}",x);
        console.log(window["row" + x]);
    }
}

tableConstructor(["<p>{x}</p>", "<div>{x}</div>", "<i>{x}</i>"]);

这样你可以这样做：

tableConstructor(["<p>hey variable x is {x}</p>", "<div>now is {x}</div>", "<i>and it changed to this {x}</i>"]);

参数中的字符串变量

3 个答案: