Question

所以我的代码在这里：

function day(time) {
    jQuery.parseJSON(time);
}

$(document).ready(function() {
    $.getJSON("http://www.freecodecamp.com/news/hot", function(news) {
        var html = "";
        var br = "</br>";

        news.forEach(function(val) {
            html += "\n\
    <div class='col-md-3'>\n\
    <div class = 'panel panel-default'>\n     <div class = 'panel-image'> \n "
            html += "<img src='" + val.image + " 'width='100%' height='100%' />\n\
          </div>\n"

            html += "<a href='" + val.link + "'>" + val.headline + "</a></p>"
            html += "<p>by: <a href='http://www.freecodecamp.com/" + val.author.username + "'>" + val.author.username + "</a></p>"
            html += "<p> ♥" + " " + val.upVotes.length + "</p>"
            html += "<p>Posted on:" + day(val.timePosted)
            "</p>\n\
       </div>\n\
     </div>\n"

        });
        
        $(".stories").html(html);
      
    });
});

当它循环遍历代码时，它应该单独生成，但是，此函数的实际输出生成代码，就好像它将所有内容嵌套在col-md-3 div中一样。

有点像这样：

<div class="col-md-3">
         <div class="col-md-3'>
                .
                  .
                    .
                      <div...

Answer 1

你的最后一个字符串与结束标记没有任何关系：

html += "<p>Posted on:" + day(val.timePosted)
"</p>\n\
   </div>\n\
 </div>\n"

如果你想保留当前的结构，那么你需要html +=：

html += "<p>Posted on:" + day(val.timePosted)
html += "</p>\n\
   </div>\n\
 </div>\n"

我推荐像JSHint或ESLint（http://eslint.org/）这样的工具，它可以警告你这样的事情。例如，将代码粘贴到JSHint的在线linter节目中

期望一个赋值或函数调用，而是看到一个表达式。

在相关的行上。

Javascript生成html嵌套本身

1 个答案: