javascript - Moving through an array one by one on click -

i have interaction populates/repopulates modal on click. population happens through traversal of key values of json object. need have bit of logic sets these keys' index (back or forth) depending on users clicks.

the arrows in top right corner(.next .prev) trigger , forth traversal. unique post json data updated.

i've put comments inside code , jsfiddles ease of reading. need traversal have bit of validation when hits end of array go start , vice versa. must abide next , prev button constraints because triggers synchronizes multiple interactions i've made prior to.

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 awesome post 1",     post_b :  "this awesome post 2",     post_c :  "this awesome post 3",     post_d :  "this 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 on last index               //reset val               return $(".unique-post").hide().html(val).fadein(); //sets .modal-main first val index             //else                 //val++               return $("unique-post").hide().html(val).fadein(); //sets .modal-main next val index           }         });         return $(".prev").on({           click: function() {             //if val on index 0               //reset val last index               return $(".unique-post").hide().html(val).fadein(); //sets .modal-main last val index             //else                 //val--               return $(".unique-post").hide().html(val).fadein(); //sets .modal-main previous val index            }         });       });     }; 

the json data in end html markup.

if understanding correctly, need go , forth through array.

var indexer = 0 //start point  //next: if (indexer == key.length - 1){     return $(".unique-post").hide().html(indexer).fadein(); //sets .modal-main first val index } else {    indexer++    return $("unique-post").hide().html(indexer).fadein(); //sets .modal-main next val index }  //prev: if (indexer == 0){     return $(".unique-post").hide().html(indexer).fadein(); //sets .modal-main first val index } else {    indexer--    return $("unique-post").hide().html(indexer).fadein(); //sets .modal-main next val index } 

i feel simple that, let me know if doesn't work or fit trying accomplish.

v/r