Question

我试图获取值列表。基本上我是尝试用JS计算photoshop模板的列宽。它看起来像这样：一个15px排水沟，一个52px柱，一个15px排水沟，一个15px排水沟，一个53px柱，一个15px排水沟。基本上我需要在初始值中添加36个值，并打印该计算的每一步。

所以我的循环由6个元素组成。这是我做的：

col1 = 52;
col2 = 53;
gutter = 15;
result = 145;

for (i = 0; i <= 6; i++) {
    result = result + gutter;
    document.getElementById("result").innerHTML = result.toString();
    result = result + col1;
    document.getElementById("result").innerHTML = result.toString();
    result = result + gutter;
    document.getElementById("result").innerHTML = result.toString();
    result = result + gutter;
    document.getElementById("result").innerHTML = result.toString();
    result = result + col2;
    document.getElementById("result").innerHTML = result.toString();
    result = result + gutter;
    document.getElementById("result").innerHTML = result.toString();
}

如果我用console.log替换innerHTML，它将完美地工作。但我认为如果它与innerhtml一起工作会更好。问题是，使用该函数，div＃result只显示结果变量的最后一个值。我希望看到每一步......

顺便说一下，我认为我的功能可以写得更好。其中有很多重复

编辑：这是更新的代码，感谢gillesc，因为你可以看到它非常难看，但它的工作原理

col1 = 52;
col2 = 53;
gutter = 15;
result = 145;
space = "<br/>";

for (i = 0; i < 6; i++) {
    result += gutter;
    document.getElementById("result").innerHTML += result.toString() + space;
    result += col1;
    document.getElementById("result").innerHTML += result.toString() + space;
    result += gutter;
    document.getElementById("result").innerHTML += result.toString() + space;
    result += gutter;
    document.getElementById("result").innerHTML += result.toString() + space;
    result += col2;
    document.getElementById("result").innerHTML += result.toString() + space;
    result += gutter;
    document.getElementById("result").innerHTML += result.toString() + space;
}

Answer 1

这是一种更优雅的方式。构建一个数组并使用join()创建间隔字符串。仅更新一次innerHTML。

+=要追加，=要替换。所以停止替换innerHTML并附加到它。 +=也适用于数字，因此result = result + gutter;可以只是result += gutter。

在任何地方添加var以避免这些变量出现在全局范围内。

JS Fiddle

var col1 = 52;
var col2 = 53;
var gutter = 15;
var result = 145;
var space = " ";
var html = [];


for (var i = 0; i < 6; i++) {
    html.push(result += gutter);
    html.push(result += col1);
    html.push(result += gutter);
    html.push(result += gutter);
    html.push(result += col2);
    html.push(result += gutter);
}

document.getElementById("result").innerHTML = html.join(space);

Answer 2

您每次都要重新分配innerHTML元素。停止执行document.getElementById("result").innerHTML = result.toString();和document.getElementById("result").innerHTML += result.toString();。

小笔记：

循环运行7次而不是6次。
在循环之前运行document.getElementById('result');一次以提高性能。
你不需要result.toString()，JS足够聪明，可以在附加到字符串时进行转换。

我建议你这样做：

const col1 = 52, col2 = 53, gutter = 15, result = 145;
const elem = document.getElementById('result');

for (i = 0; i < 6; ++i) {
    elem.innerHTML += (result += gutter);
    elem.innerHTML += (result += col1);
    elem.innerHTML += (result += gutter);
    elem.innerHTML += (result += gutter);
    elem.innerHTML += (result += col2);
    elem.innerHTML += (result += gutter);
}

使用innerHTML增加值并打印每一步

2 个答案: