Question

我有一个交互，可以在点击时填充/重新填充模态。通过遍历JSON对象的键值来进行填充。我需要有一些逻辑来设置这些键的索引（来回或取决于用户点击）。

右上角的箭头（.next .prev）是触发来回遍历的原因。 Unique post是JSON数据的更新位置。

我在代码中添加了注释，并且jsfiddles便于阅读。我真的需要遍历来进行一些验证，以确定它何时到达数组的末尾才能启动，反之亦然。我必须遵守next和prev按钮约束，因为它们是同步我之前进行的多次互动的触发器。

   /*
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标记。 unique post

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

单击时逐个移动数组

1 个答案: