Question

我正在尝试创建一个滑块，用于显示餐厅的每日特价。我有一个json（或xml）提要，我从（从wordpress）获取数据。我能够将数据导入数组并将其记录到控制台，但我无法弄清楚如何循环遍历数组并逐个显示内容。

这是剧本：

var content = new Array();
$.getJSON("http://riverdalecornercafe.com/wp/category/isd/feed/json", function(data) {
    $.each(data, function(i, item) {
        content.push(item.content);
    });
console.log(content[0]);
});

HTML：

    <div class="main">
        <div class="title"></div>
        <div class="content"></div>
    </div>

Answer 1

如果你有JSON数据，那真的很简单。你可以使用ajax来执行你的查询：

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        url: "http://riverdalecornercafe.com/wp/category/isd/feed/json",
        success: function(jsonArray) {
            for (var i = 0; i < jsonArray.length; i++)
            {
               $('.content').append(/*the format you want to add in html */ json value : 'jsonArray[i].name)
            }


     error: function()
         {
            you can handle your error
          }

希望它有所帮助。

Answer 2

您可以为json项创建循环。拥有你的json的最后一项你可以一个接一个地去。

例如

$.getJSON("http://riverdalecornercafe.com/wp/category/isd/feed/json", function(data) {
   var myJson = data;
   var lastItem = myJson.length;
   for (var i = 0; i < lastItem; i++){
      $('.content').append(myJson[i].title);
   }
});

最新更新

<script type="text/javascript" text="javascript">
    $.getJSON("http://riverdalecornercafe.com/wp/category/isd/feed/json", function (data) {
        var myJson = data;
        var lastItem = myJson.length;
        for (var i = 0; i < lastItem; i++) {
            $('.innerCarousel').css('width', (lastItem * 500) + 'px');
            $('.innerCarousel').html("<div style=float:left;width:500px;><img src='" + myJson[i].imagePath + "' /></div>");
        }
    });
    $('.next').on('click', function () {
        $('.innerCarousel').animate({ left: ($(this).css('left') - 500) + "px" },"medium");
    });
    $('.prev').on('click', function () {
        $('.innerCarousel').animate({ left: ($(this).css('left') + 500) + "px" }, "medium");
    });
</script>


<div style="width:500px;height:300px;overflow:hidden;position:relative;">
    <div class="innerCarousel" style="position:absolute;left:0px;"></div>
    <div class="next"></div>
    <div class="prev"></div>
</div>

来自json feed的jQuery滑块

2 个答案: