Question

所以我正在学习javascript并决定进行乒乓球测试挑战。基本上你它会提示你一个数字，并显示所有数字，除了＆＃34; ping＆＃34;为3的倍数，＆＃34; pong＆＃34; 5的倍数和＆＃34;乒乓球＆＃34;对于15的倍数我得到了它的工作，但由于某种原因它在每第5个索引后显示一个空列表。我不知道为什么会这样，所以我希望能得到一些帮助以及一些解释。这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <script src="epicodus/js/jquery-1.11.2.js"></script>
        <script src="epicodus/js/ping-pong.js"></script>

        <title>Ping Pong Test</title>

    </head>

    <body>
        <ul id="list">
        </ul>
    </body>
</html>

$(document).ready(function() {
var number = parseInt(prompt("What number would you like me to ping-pong up to?"));

for(index = 1; index <= number; index += 1) {
    if (index % 15 === 0) {
        $("#list").append("<li>" + "ping-pong" + "</li>");
    } else if (index % 3 === 0) {
        $("#list").append("<li>" + "ping" + "</li>");
    } else if (index % 5 === 0) {
        $("#list").append("<li>" + "pong" + "<li>");
    } else {
        $("#list").append("<li>" + index + "</li>");
    }
}

});

另外，在关闭循环后，javascript中的循环是否需要分号？

Answer 1

如果您的index % 5 === 0条件的条件评估为 true ，则代码会附加li元素，但会忘记使用相应的</li>结束标记标签（因为它丢失了）。

浏览器会将标记解释为两个背靠背<li>元素（与您预期的元素相对）并尝试相应地关闭标记，从而导致出现空白项目。

为了说明问题，您的上述代码将生成以下HTML标记：

<ul id="list">
   <li>1</li>      
   <li>2</li>      
   <li>ping</li>      
   <li>4</li>      
   <li>pong</li>   # your code forgot to close <li> tag so it's really <li>pong<li>
   <li></li>       # browser close out extra <li>, rendering as empty value
   <li>ping</li>   
   <li>7</li>
   ...
</li></ul>

通过关闭代码块中的<li>标记，一切都按预期工作：

var number = parseInt(prompt("What number would you like me to ping-pong up to?"));

for(index = 1; index <= number; index += 1) {
    console.log(index);
    if (index % 15 === 0) {
        $("#list").append("<li>ping-pong</li>");
    } else if (index % 3 === 0) {
        $("#list").append("<li>ping</li>");
    } else if (index % 5 === 0) {
        $("#list").append("<li>pong</li>");   # < note the ending tag
    } else {
        $("#list").append("<li>" + index + "</li>");
    }
}

不，在for循环后，您不需要使用分号。

Answer 2

var number = parseInt(prompt("What number would you like me to ping-pong up to?"));

for(index = 1; index <= number; index += 1) {
    console.log(index);
    var $li = $('<li>');
    if (index % 15 === 0) {
        $("#list").append($li.text(ping-pong));
    } else if (index % 3 === 0) {
        $("#list").append($li.text(ping));
    } else if (index % 5 === 0) {
        $("#list").append($li.text(pong));
    } else {
        $("#list").append($li.text(index));
    }
}

我发现在添加html元素时创建像这样的jquery html对象是最好的做法 - ＆gt; $（ '

'）它会自动封闭您的元素，因此您不会遇到该问题。

Answer 3

<强> jsBin demo

^{使用结束</li>标记修复拼写错误 ...}

您忘了将index分配给 var
使用parseInt方法时，添加radix参数（10表示十进制）。
不要再次访问循环内的相同元素选择器。 速度非常慢。
在每次循环迭代中，你都要强制你的脚本搜索它，而不是：创建一个字符串，在循环中连接你的字符串，而不是一旦完成只在生成的HTML 后附加到你的元素！ 20000的用户输入将在几秒钟内为您提供结果。
15个中的多个是都是3和5 的倍数的所有数字。
对于循环参数，i += 1与i++
$(function() {是等待 DOM准备好

让我们应用上述内容：

$(function() { // DOM ready shorthand

  var n = parseInt(prompt("Enter a Number"), 10);
  var li  = "";              // The string to concatenate HTML
  for(var i=1; i<=n; i++) {
    li += "<li>"+( (i%3?"":"ping") + (i%5?"":"pong") || i )+"</li>";
  }
  $("#list").html(li);      // Append only once

});

那么(i%3?"":"ping") + (i%5?"":"pong") || i做了什么？

(i%3?"":"ping") >> if i%3 is true (greater than 0) use "", else use "ping"
 +              >> concatenate
(i%5?"":"pong") >> if i%5 is true (greater than 0) use "", else use "pong"
 ||             >> (OR) else (if the concatenation resulted in "" [false]) than...
 i              >> use the current iteration index Number

从逻辑上讲，你可以得出结论：
如果i 是3和5的倍数（意味着 15的多个！），你最终会得到一个串联的“乒乓球”。
如果连接返回("") + ("")等于""，并且""||评估结果为false，则会使用i。

此外，如果你不喜欢从上面的逻辑返回的"pingpong"字符串，你可以解析返回的字符串和g - 用{替换（全局标记）所有"gp"个实例{1}}返回所需的"g-p"，如：

"ping-pong"

乒乓javaScript测试：每5个索引后出现意外列表？

3 个答案: