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

您的<input type="hidden" value="your image data?">到a似乎是next右箭头，但是对于左箭头，您从0到{{1}这应该是a+3。你可能意味着：
```
pre
```
在左箭头单击循环后你有a-3，当循环结束时，for(var i = a-1; i >= pre; i--)的值将为-1（或者如果纠正＃1，它将是下面的一个期望值），所以你可能会想要：
```
a = i
```
或者就像你做右箭头一样，让它在你的循环中：
```
i
```
对于左箭头，您需要检查它是否达到零，如果是，则只显示前3项，禁用左箭头等：
```
a = i + 1;
```
对右箭头执行相同的操作，检查它是否超出了长度：
```
a = a - 1; //or in short a--;
```

从json

1 个答案: