jquery - Jquery JSON 包装所有图像

Question

我有这段代码使用 Jquery Json 成功地从 Behance 中提取图像：

$('a.link').live('click', function () {
    h = window.location.hash.replace('#', '');
    $.getJSON("http://www.behance.net/v2/projects/" + h + "?api_key=" + api + "&callback=?", function (data) {
        var project_data = "";
        for (var i = 0; i < data.project.modules.length; i++) {
            if (data.project.modules[i].type == "image") { 
                project_data += '<img src="' + data.project.modules[i].src + '" />';
            }
            if (data.project.modules[i].type == "text") {
                project_data += '<p>' + data.project.modules[i].text + '</p>';
            }
        };

        $('.portfolio-details h3').html(data.project.name);
        $('.portfolio-details div').html(project_data);
        $('.portfolio-details').fadeIn(6000);

    });
});

他们正在拉入页面，目前显示为单独的图像。但是我如何将所有图像包装在这段代码中以制作幻灯片？每个图像文本代表需要添加图像的位置

<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item"> each image </div>
<div class="item"> each image </div>
</div>
</div>

Answer 1

我没有.portfolio-details在你的 html 中看到，所以我假设它是.carousel-inner：

for (var i = 0; i < data.project.modules.length; i++) {
        ...
    $(".portfolio-details div").eq(i).html(project_data);
}

Answer 2

为什么不能将所需的 html 添加到var project_data = "";变量中？

var project_data = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner">';

// Loop goes here...
project_data += '<div class="item"><img src="' + data.project.modules[i].src + '"> </div>';
// more code here
// end of loop

project_data += '</div></div>';

编辑： 这是一个简单的方法来解决这个问题。

(function($) {
    var user = 'userNameGoesHere',
    api = 'apiKeyGoesHere', 
    project_str = "", 
    i = 0;

    var project_images, carousel;

    for(i; i <= 3; i += 1) {
        $.getJSON("http://www.behance.net/v2/users/" + user + "/projects?api_key=" + api + "&callback=?&page=" + i, function (data) {
            if ($.type(data.projects) === 'array') {
                $.each(data.projects, function(i, obj) {
                    project_str += '<a class="tips more-info link" data-placement="bottom" href="#' + obj.id + '">';
                        project_str += '<div class="span3 portfolioitem">';
                            project_str += '<img src="' + obj.covers['404'] + '">';
                            project_str += '<div class="portfolioitem-hoverinfo"> <h3>' + obj.name + '</h3> </div>';
                        project_str += '</div>';
                    project_str += '</a>';
                });
            }

            $('#portfolio-items').append(project_str);
        });
    }


    $('a.link').live('click', function () {
        var h = window.location.hash.replace('#', '');

        $.getJSON("http://www.behance.net/v2/projects/" + h + "?api_key=" + api + "&callback=?", function (data) {
            var project_data = "";

            // "data.project.modules" here throws an error on the first click... not sure why
            for (var i = 0; i < data.project.modules.length; i++) {
                if (data.project.modules[i].type == "image") { 
                    project_data += '<img src="' + data.project.modules[i].src + '">';
                }

                if (data.project.modules[i].type == "text") {
                    project_data += '<p>' + data.project.modules[i].text + '</p>';
                }
            }

            $('.portfolio-details h3').html(data.project.name);
            $('.portfolio-details div').html(project_data);
            $('.portfolio-details').fadeIn(6000);

            project_images = $('.portfolio-details').find('img');
            carousel = '<div id="myCarousel" class="carousel slide"> <div class="carousel-inner">';

            $.each(project_images, function(i, img) {
                carousel += '<div class="item"> <img src="' + img.src + '"> </div>';
            });

            carousel += "</div></div>";

            // Do something with the carousel - append somewhere or something
            $(document.body).prepend(carousel);
        });
    });
}(jQuery));