3

我有一个 JSON 提要，我正在访问以从中提取数据，并且正在使用一些 javascript 和 jQuery 将数据放入 Bootstrap 轮播。我无法弄清楚如何正确循环数据，以适当地提供轮播。我想做的是循环遍历每个 JSON 值，并依次为轮播的每行提供三个值。我的尝试导致在轮播行的所有迭代中显示三个连续值，而不是移动到每行接下来的三个值。

所以，从本质上讲，我似乎有一个循环问题。我很难找出循环这个的正确方法。我尝试了几个选项，但没有一个能正常工作。同样，我想要的只是为轮播提供每行 3 个不同的项目/值。

我注意到发布了一个关于提供无序列表的非常相似的问题，但是我的响应实现不起作用。

谢谢你的帮助。

<script>
var $ = jQuery.noConflict();
var counter = 1;
// Set the global configs to synchronous 
$.ajaxSetup({
cache: true,
async: false
});

$(document).ready(function() {

$.getJSON('http:JSON_feedlocation......', function(data) {  

            html = "";

                // Carousel wrapper divs - exempt from loop
                html += "<div class='container carousel carousel-show-one-at-a-time slide' data-interval='6000' data-ride='carousel' id='the-new-marketing-carousel'>";
                html += "<div class='carousel-inner'>";

                    // First Loop - row wrapper
                    for (var i in data.content) {                     

                    html += "<div class='item'>";
                    html += "<div class='newsblock panel-display etowah-newsblock clearfix etowah-newsblock-trio'>";   
                    html += "<div class='container'>";
                    html += "<div class='row'>";  

                        // Second loop to pull in specific values, three values per loop
                        for (var i = 0; i < 3; i++) {

                          var type = data.content[i]["type"];
                          var title = data.content[i]["title"];
                          var url = data.content[i].url;
                          var created = data.content[i].created;
                          var teaser = data.content[i]["teaser"];

                        html += "<div id='carousel-blocks' class='newsblock-col-single newsblock__content--first col-md-4 col-sm-4 col-tiny-4'>";
                        html += "<div class='panel-pane pane-bundle-etowah-newsblock-item'>";
                        html += "<div class='news-block news-block--medium'>";
                        html += "<a href='"+ url +"''>";
                        html += "<img class='block__img' src='http://img" + data.content[i].thumbnail.split('public/')[1].split('?')[0] + "' />";
                        html += "</a>";            
                        html += "<h3 class='news-block__title'>"
                        html += "<a href='"+ url +"'>"+ title +"";
                        html += "</a>";
                        html += "</h3>";
                        html += "</div>";  
                        html += "</div>"; 
                        html += "</div>"; 

                        }

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

                    }

                html += "</div>";
                html += "</div>";
                html += "<a class='left carousel-control' href='#the-new-marketing-carousel' data-slide='prev'><i class='glyphicon glyphicon-chevron-left'></i></a>";
                html += "<a class='right carousel-control' href='#the-new-marketing-carousel' data-slide='next'><i class='glyphicon glyphicon-chevron-right'></i></a>";

                counter = counter + 1;

        document.getElementById("api-carousel").innerHTML=html;
        $(".carousel div.item").first().addClass("active");

  });
});
</script>

<div id="api-carousel">
    <!-- Carousel api -->
</div>
4

0 回答 0