來自json feed的jQuery滑塊

我正在嘗試創建一個滑塊來顯示餐廳的每日特色菜單。我有一個json（或xml）feed，我從（從wordpress中獲取）數據。我能夠將數據存入數組並將其記錄到控制檯，但我無法弄清楚如何遍歷數組並逐個顯示內容。來自json feed的jQuery滑塊

這是腳本：

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：

來源

2014-02-17 brklyn8900

如果你有JSON數據，它真的很簡單。你可以用阿賈克斯來執行你的查詢：

$.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 
      }

希望它有幫助。

來源

2014-02-17 14:44:17

您可以爲您的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>

來源

2014-02-17 14:46:29 R0ger

謝謝，我抽到了JSON數據，並將其加載到數組，但我的問題是如何在陣列上進行迭代，並顯示內容一個接一個，類似於圖像滑塊。 – brklyn8900

您可以將div內的所有圖像與隱藏的溢出綁定在一起，並在裏面製作一些滑動（動畫），或者您可以簡單地調用數組中的下一個元素。我可以給你發送代碼，如果你想 – R0ger

感謝R0ger，我很想看到代碼，我對JavaScript並不擅長，所以我必須通過嘗試和失敗來學習。 – brklyn8900

來自json feed的jQuery滑塊

回答

相關問題