如何为“下一步”创建一个永无止境的循环?奥得河“prev"按钮(php / jquery)

How do i make a neverending loop for "next" oder "prev" buttons [php/jquery]

本文关键字：下一步 prev 得河 jquery quot php 按钮 永无止境 创建 一个 循环      更新时间：2023-09-26

如何为"下一个"按钮和"上一个"按钮创建一个永无止境的循环?
例如:如果有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，我也尝试了这个:

$('.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]);
});
相关文章：