嵌套循环-Javascript

Question

我有一个问题与我在这里问的问题有关

我正在尝试嵌套一个循环，不太确定这是否是一条路。我想做的是显示一些与分数相关的星星。所以，如果他们得到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循环内部或外部。此外，由于某种原因，它没有显示正确的空星数。它显示1空表示0个正确答案，显示3或4表示其他任何

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

感谢大家

Answer 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':'';是如何工作的呢
很简单，它是一个三元运算符。缩写：

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

Answer 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"/>';
}

Answer 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"/>';
}

我没有测试，但这应该让你开始。