點擊一個一個移動數組

Question

我有一個交互，填充/重新填充單擊模態。人口是通過遍歷JSON對象的關鍵值而發生的。我需要一些邏輯來設置這些鍵的索引（前後），具體取決於用戶的點擊次數。

右上角的箭頭（.next.prev）是什麼觸發來回遍歷。 Unique post是JSON數據將被更新的地方。

爲了便於閱讀，我在代碼中加入了評論，並且提供了jsfiddles。我真的需要遍歷來驗證它何時碰到數組的末尾才能啓動，反之亦然。我必須遵守next和prev按鈕約束，因爲它們是同步我之前做過的多個交互的觸發器。

CODE：JSFIDDLE

/* 
SAMPLE OF DATA 
=============== 
var data = { 
    created_at: "2013-07-15T05:58:25Z", 
    id: 21, 
    name: "Skatelocal.ly", 
    svg : "<svg> ... </svg>", 
    post_a : "This is an awesome post 1", 
    post_b : "This is an awesome post 2", 
    post_c : "this is an awesome post 3", 
    post_d : "this is an awesome post 4" 
}; 
*/ 
postInModal = function(data, status) { 
     var keys; 
     keys = ["post_a", "post_b", "post_c", "post_d"]; 
     return $.each(keys, function(i, key) { 
     var val; 
     val = data[key]; 

     $(".next").on({ 
      click: function() { 
      //if val is on last index 
       //reset val 
       return $(".unique-post").hide().html(val).fadeIn(); //sets .modal-main to first val index 
      //else 
       //val++ 
       return $("unique-post").hide().html(val).fadeIn(); //sets .modal-main to next val index 
      } 
     }); 
     return $(".prev").on({ 
      click: function() { 
      //if val is on index 0 
       //reset val last index 
       return $(".unique-post").hide().html(val).fadeIn(); //sets .modal-main to last val index 
      //else 
       //val-- 
       return $(".unique-post").hide().html(val).fadeIn(); //sets .modal-main to previous val index 

      } 
     }); 
     }); 
    }; 

到底JSON數據將是一個HTML標記。

Answer 1

如果我的理解正確，你需要通過一個數組來回。

var indexer = 0 //Start point 

//NEXT: 
if (indexer == key.length - 1){ 
    return $(".unique-post").hide().html(indexer).fadeIn(); //sets .modal-main to first val index 
} else { 
    indexer++ 
    return $("unique-post").hide().html(indexer).fadeIn(); //sets .modal-main to next val index 
} 

//PREV: 
if (indexer == 0){ 
    return $(".unique-post").hide().html(indexer).fadeIn(); //sets .modal-main to first val index 
} else { 
    indexer-- 
    return $("unique-post").hide().html(indexer).fadeIn(); //sets .modal-main to next val index 
} 

我覺得它是如此簡單，但讓我知道如果不工作或適合你想要完成。

V/R