点击一个一个移动数组

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