-1

「次へ」または「前へ」ボタンの無限ループを作成するにはどうすればよいですか?
例: 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);
});

しかし、運が悪い！

4

1 に答える 1

0

あなたはかなり複雑なアプローチを使用しています。とにかく、あなたの問題は、あなたがそうしているActualCounterときにあなたがアップデートしていないことかもしれませんvar SetNext = 0. ActualCounter == TotalPics更新していないため、常に true であるため、画像は 0 のままになります。

しかし、この複雑なアプローチは本当に必要ありません。通常の配列インデックス (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]);
});
于 2013-03-12T01:47:38.693 に答える