0

クリック時にモーダルを設定/再設定するインタラクションがあります。データの取り込みは、JSON オブジェクトのキー値のトラバーサルを通じて行われます。ユーザーのクリックに応じてこれらのキーのインデックスを (前後に) 設定するロジックが必要です。

右上隅の矢印 ( .next .prev) は、前後のトラバーサルをトリガーするものです。 Unique postJSON データが更新される場所です。

読みやすくするために、コード内にコメントと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
}

それと同じくらい簡単だと思いますが、うまくいかなかったり、達成しようとしていることに合わない場合はお知らせください。

V/R

于 2013-07-17T20:06:27.143 に答える