Question

我一直在制作一个页面，显示来自Guardian的最新消息（使用jQuery .ajax调用）。有一篇文章包含10篇最近的新闻文章，我在for循环中使用.append（来自api调用的数据）制作每篇文章。

虽然在一个.append调用中有很多项目，但代码开始变得难以理解，所以我正在考虑几种不同的方法来清理它。

我的问题是，在这种情况下，什么是最佳做法？为新闻项目的每个部分（标题，缩略图等）制作局部变量：

for (var i = 0; i < 10; i++) {

            var content = json.response.results[i];

            var title =      '<h3 class="news-item-font">' + content.webTitle + '</h3>';
            var thumbnail =  '<div class="inner thumbnail">' + content.fields.main + </div>;
            var date =       '<h4 class="date">' + content.webPublicationDate + '</h4>';
            var description = '<p>' + content.fields.standfirst + '</p><p class="push-top push-bottom"><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>';

            $('.news').append(
                '<div class="news-item">'
                    + title
                    + thumbnail
                    + date
                    + description
                + '</div>');
        }

或者进行多次.append调用，所以更像是这样：

for (var i = 0; i < 10; i++) {

    var content = json.response.results[i];

    $('.news').append('<div class="news-item">');
    $('.news').append('<h3 class="news-item-font">'  +  content.webTitle + '</h3>');
    $('.news').append('<div class="inner thumbnail">' + content.fields.main + '</div>');
    $('.news').append('<h4 class="date">'            +  content.webPublicationDate + '</h4>';);
    $('.news').append('<p>'                          +  content.fields.standfirst + '</p>');
    $('.news').append('<p class="push-top push-bottom"><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>');
}

也许这不是10条新闻文章的问题，但如果我增加数字可能会有其他问题吗？

我是一个javascript noob，所以对我很轻松！ :)任何帮助或建议都会很棒！谢谢

进行多次.append调用与存储局部变量

0 个答案: