嵌套 For 循环 - Javascript答案

【问题标题】：Nested For Loops - Javascript嵌套 For 循环 - Javascript
【发布时间】：2013-02-08 15:15:41
【问题描述】：

我有一个与我提出的问题有关的问题here

我正在尝试嵌套一个循环，但不确定这是否可行。我想要做的是显示一些与分数相关的星星。所以，如果他们得到 3 个问题，他们就会得到 3 颗星。如果没有达到要求的分数，我遇到的问题是显示空星。

E.G：需要 10 才能进入下一个级别。他们得 6 分。我可以显示 6 颗金星，但无法显示 4 颗空星。我希望我解释得对。

这是我目前的代码

var se = '';
var sep = '';
for (var i = 1; i <= score; i++)
{
    se = se + '<img src="./images/star.png"/>'; 
}

我也有这个循环来尝试显示空星

for (var j = 1; j <= i; j++)
{
    sep = sep + '<img src="./images/emptystar.png"/>';
}

我不确定这是否需要进入已经存在的 for 循环内部或超出它。此外，由于某种原因，它没有显示正确数量的空星。 0 正确答案显示 1 空，其他任何内容显示 3 或 4

我认为我在第二个循环中进行了正确的计算。任何我出错的地方都将不胜感激。正如我所说，第一个循环正常工作。

谢谢大家

【问题讨论】：

只要它有效，您就不必进入嵌套循环。实际上，我认为在这种情况下没有实用的方法来使用它们。
第二个循环不能正常工作。它没有显示正确数量的空星:(我想把它放在外面并在第二个 for 循环中使用它们会起作用的语句。它不想这样做
从头开始——对于第二个循环，您必须从 i 开始并让它循环到 10 点。
星数有上限吗？为什么不从所有空星开始，然后在获得积分时添加满星并删除空星？

标签： javascript for-loop nested-loops

【解决方案1】：

试试这个：

var stars = '';
for (var i = 1; i <= 10; i++) {                        // Loop 10 times
    var empty = (i > score)?'empty':'';                // If i > score, set this variable to the string 'empty';
    stars += '<img src="./images/'+ empty +'star.png"/>'; // Add the image (star.png or emptystar.png depending on the score).
}

这样做的好处是您只需要 1 个循环，这意味着您不会复制任何代码。

对于score == 6，返回：

<img src="./images/star.png"/>
<img src="./images/star.png"/>
<img src="./images/star.png"/>
<img src="./images/star.png"/>
<img src="./images/star.png"/>
<img src="./images/star.png"/>
<img src="./images/emptystar.png"/>
<img src="./images/emptystar.png"/>
<img src="./images/emptystar.png"/>
<img src="./images/emptystar.png"/>

那么，您要问的是，var empty = (i > score)?'empty':''; 这条线是如何工作的？
很简单，它是ternary operator。简写：

var empty;
if(i > score){
    empty = 'empty';
}else{
    empty = '';
}

【讨论】：

非常感谢@Cerbrus。这很有魅力。我现在注意到我忽略了在循环中包含最大数量的问题
嗯，@Chris，你能告诉我你为什么不接受我的回答吗？你现在接受的那个完全一样，但是使用了更多的变量，for循环，并且有重复的代码。
嘿，我认为我能够接受每个有效的答案。我的错。我不知道你只能接受一个有效的。没有恶意
啊，有道理，是的：P 没有难过的感觉！

【解决方案2】：

试试这个：

var stars = '';
var maxstars = 10;

for (var i = 0; i < score; i++)
{
    stars = stars + '<img src="./images/star.png"/>'; 
}

for (var j = score; j < maxstars; j++)
{
    stars = stars + '<img src="./images/emptystar.png"/>';
}

【讨论】：

很好的解决方案，但最好有解释。
嗨@Tucker，我试过这个，但无论我对错多少次，它都会显示10次空星星。我只是看不出哪里出错了
@Chris：您一定是以错误的方式集成代码，因为它工作得非常好：jsfiddle.net/tffyY。 “我就是看不出哪里出错了”...我们也不知道，因为我们不知道你如何使用代码。
这是我的错。我注意到我放了 j = 0 而不是 j = score。它现在也可以作为一种享受。非常感谢

【解决方案3】：

只需使用一个循环：

var score = 5;
var sep = "";
for (var i = 0; i <= 10; i++)
{
    sep += (i < score) ? '<img src="./images/star.png"/>' : '<img src="./images/emptystar.png"/>';
}

我没有测试，但这应该可以帮助您入门。

【讨论】：