我有一个与我提出的问题相关的问题 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
我认为我在第二个循环中进行了正确的计算。任何我出错的地方都将不胜感激。正如我所说,第一个循环按其应有的方式工作。
谢谢大家
最佳答案
试试这个:
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 = '';
}
关于javascript - 嵌套 For 循环 - Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14775622/