從json製作滑塊

Question

我打算從可用的JSON對象中創建一個簡單的滑塊。我想要單擊左側或右側滾動3個項目，即3 keys of JSON。

例如：如果我點擊右箭頭，然後我想獲取0到2鍵的JSON和顯示圖像，如果再次右箭頭，然後3到6，依此類推。同樣在點擊左箭頭的情況下。我想從JSONkeys的當前位置（如6到3）進行負循環。

我試過我的代碼但是它不能正常工作。

var recents = ""; 
var imges = ""; 
var imge = ""; 
var recent_prod = <?php echo $recent_prod; ?>; 
$("#num").html(recent_prod.length); 
for(var a = 0; a < 3; a++) 
{ 
    imges = recent_prod[a].image; 
    imge = imges.split[","]; 
    recents += '<a href="' + base_url + 'init/product/' + recent_prod[a].id + '">'+ 
        '<div class="related_prod_thumb">' + 
         '<div class="related_prod_img">'+ 
          '<span class="helper"></span>'+ 
          '<img src="' + base_url + 'uploads/thumbnail/' + imges + '" width="100">'+ 
         '</div><div class="related_prod_title">' + recent_prod[a].title +'</div>'+ 
         '<div class="related_prod_price">' + 'Rs. ' + recent_prod[a].price + '</div></div></a>'; 
} 
$("#recent_views").html(recents); 

$(document).on("click", ".rightarr", function(){ 
    var next_recent_prod = ""; 
    var next = a + 3; 
    for(var i = a; i < next; i++) 
    { 
     imges = recent_prod[i].image; 
     imge = imges.split[","]; 
     next_recent_prod += '<a href="' + base_url + 'init/product/' + recent_prod[i].id + '">'+ 
         '<div class="related_prod_thumb">' + 
          '<div class="related_prod_img">'+ 
           '<span class="helper"></span>'+ 
           '<img src="' + base_url + 'uploads/thumbnail/' + imges + '" width="100">'+ 
          '</div><div class="related_prod_title">' + recent_prod[i].title +'</div>'+ 
          '<div class="related_prod_price">' + 'Rs. ' + recent_prod[i].price + '</div></div></a>'; 
     a = a + 1; 
    } 
    $("#num").html(a); 

    $("#recent_views").html(next_recent_prod); 
}); 

$(document).on("click", ".leftarr", function(){ 
    var next_recent_prod = ""; 
    var pre = a - 3; 
    for(var i = pre; i >= 0; i--) 
    { 
     imges = recent_prod[i].image; 
     imge = imges.split[","]; 
     next_recent_prod += '<a href="' + base_url + 'init/product/' + recent_prod[i].id + '">'+ 
         '<div class="related_prod_thumb">' + 
          '<div class="related_prod_img">'+ 
           '<span class="helper"></span>'+ 
           '<img src="' + base_url + 'uploads/thumbnail/' + imges + '" width="100">'+ 
          '</div><div class="related_prod_title">' + recent_prod[i].title +'</div>'+ 
          '<div class="related_prod_price">' + 'Rs. ' + recent_prod[i].price + '</div></div></a>'; 
    } 
    $("#num").html(a); 

    $("#recent_views").html(next_recent_prod); 
    a = i; 
}); 

有了這段代碼，當點擊左鍵時，我得到了JSON的負鍵。這是-1，但它不存在於JSON中。所以我得到錯誤TypeError。也沒有按預期工作 任何幫助將不勝感激。謝謝。

Answer 1

1. 看來你從a去next這是a+3的右箭頭，但左箭頭你從0到pre這應該是a-3。你大概的意思：

   for(var i = a-1; i >= pre; i--) 
   

2. 你在你的左箭頭點擊循環，當循環結束後，有a = i的i值將是-1（或者修正＃1這將是一個低於期望值），所以，你可能會想：

   a = i + 1; 
   

   還是喜歡你的右箭頭做，有它內部的循環：

   a = a - 1; //or in short a--; 
   

3. 左箭頭，你需要檢查它是否達到零，如果是隻顯示前3項，禁用左箭頭，等：

   var pre; 
   if(a > 2) 
       pre = a - 3; 
   else { 
       pre = 2; 
       //disable left & make sure you enable it when right is clicked. 
   } 
   

4. 做右箭頭一樣，檢查它是否超出了長度：

   //not sure about 4, try 3 or 2 maybe if it doesn't work 
   if(a < recent_prod.length - 4) 
       next = a + 3; 
   else { 
       next = recent_prod.length - 3; 
       //disable right & make sure you enable it when left is clicked. 
   }