0

我有一个交互，在点击时填充/重新填充模式。填充通过遍历 JSON 对象的键值来发生。我需要一些逻辑来根据用户的点击设置这些键的索引（前后）。

右上角的箭头 ( .next .prev) 是触发来回遍历的原因。 Unique post是更新 JSON 数据的地方。

为了便于阅读，我在代码和jsfiddles中添加了注释。我真的需要遍历来验证它何时到达数组的末尾以开始，反之亦然。我必须遵守next和prev按钮约束，因为它们是同步我之前所做的多个交互的触发器。

代码：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 标记。 独特的帖子

4

1 回答 1

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
}

我觉得它就是这么简单，但是如果它不起作用或不适合你想要完成的事情，请告诉我。

视听/视听

于 2013-07-17T20:06:27.143 回答