Json 如何为“创建一个无休止的循环?”;“下一步”;“订单”;“上一次”;按钮[php/jquery]
如何对“下一个”或“上一个”按钮进行无中断循环?Json 如何为“创建一个无休止的循环?”;“下一步”;“订单”;“上一次”;按钮[php/jquery],json,next,Json,Next,如何对“下一个”或“上一个”按钮进行无中断循环? 例如:如果有7个记录集,用户按下“下一步”或“上一步”按钮,这样记录集就不会在到达记录集0或7时停止 我有以下代码,并尝试了多种方法来解决它们: var jsonData = ' [ {"count":1,"file":"fb305d5921e6ef7336c4ce3750b7e0a8.jpg"}, {"count":2,"file":"c2fce6d2d0af805b2d21159be7e0e60b.jpg"}, {"count
例如:如果有7个记录集,用户按下“下一步”或“上一步”按钮,这样记录集就不会在到达记录集0或7时停止 我有以下代码,并尝试了多种方法来解决它们:
var jsonData = '
[
{"count":1,"file":"fb305d5921e6ef7336c4ce3750b7e0a8.jpg"},
{"count":2,"file":"c2fce6d2d0af805b2d21159be7e0e60b.jpg"},
{"count":3,"file":"9c49190d7c152a3891ac991ebb512885.jpg"},
{"count":4,"file":"529eae9e455b24da93f4696f10eda3c0.jpg"},
{"count":5,"file":"164e16bf35d331134e872be0ccd1d2aa.jpg"},
{"count":6,"file":"f34a37b9117026139ddc297da0df2cbc.jpg"},
{"count":7,"file":"ebafad68984e409a409e9eec86f6c7c9.jpg"}
]';
function getId(file) {
for(var f in jsonData) {
if(jsonData[f].file == file)
return jsonData[f].count;
}
}
var ActualCounter = getId("fb305d5921e6ef7336c4ce3750b7e0a8.jpg");
var TotalPics = '7';
$('.PicNext').click(function() {
if(ActualCounter == TotalPics) return false;
var SetNext = ActualCounter++;
$('#ShowPicture').attr('src', '/Media/'+ jsonData[SetNext].file);
});
$('.PicPrev').click(function() {
if(ActualCounter == 1) return false;
var SetPrev = ActualCounter--;
$('#ShowPicture').attr('src', '/Media/'+ jsonData[SetPrev].file);
});
});
接下来,我也尝试了这个:
$('.PicNext').click(function() {
if(ActualCounter == TotalPics) { var SetNext = 0; } else {
var SetNext = ActualCounter++; }
$('#ShowPicture').attr('src', '/Media/'+ jsonData[SetNext].file);
});
但是没有运气 您使用的方法相当复杂。但无论如何,您的问题可能是当您执行
var SetNext=0
时,您没有更新ActualCounter
。由于您没有更新它,因此图片将卡在0上,因为ActualCounter==TotalPics
始终为真
但你并不真的需要这种复杂的方法。只需保留一个常规数组索引(从0到n-1),并在索引更改时使用余数/模运算符:
index = (index + jsonData.length) % jsonData.length;
更新
使用模方法的版本:
var jsonData = [
"fb305d5921e6ef7336c4ce3750b7e0a8.jpg"
"c2fce6d2d0af805b2d21159be7e0e60b.jpg",
"9c49190d7c152a3891ac991ebb512885.jpg",
"529eae9e455b24da93f4696f10eda3c0.jpg",
"164e16bf35d331134e872be0ccd1d2aa.jpg",
"f34a37b9117026139ddc297da0df2cbc.jpg",
"ebafad68984e409a409e9eec86f6c7c9.jpg"
];
var index = 0;
$('.PicNext').click(function() {
index += 1;
index = (index + jsonData.length) % jsonData.length;
$('#ShowPicture').attr('src', '/Media/'+ jsonData[index]);
});
$('.PicPrev').click(function() {
index -= 1;
index = (index + jsonData.length) % jsonData.length;
$('#ShowPicture').attr('src', '/Media/'+ jsonData[index]);
});
谢谢,但是我如何在我的例子中应用这个模呢?在你的例子中你不需要它。只需确保在执行
SetNext=0
时更新了ActualCounter
。如果您想使用模方法(这要容易得多),只需执行index++
,然后进行模赋值。它可能不完全起作用,但它表明了它是多么直截了当。顺便说一下,这称为“循环数组索引”。