6

作成日に従って記事のナビゲーションを作成する Ajax 関数を作成しようとしているため、ユーザーは前の (古い) リンクと次の (新しい) リンクを使用して記事をナビゲートできます。

<div class="content clear">

  <div class="article">
    Article contents...
  </div>

  <a href="#Prev" id="prev" class="leftarrow" title="Previous">EELMINE<span class="arrow_left"></span></a>
  <a href="#"     id="bactolist" onClick="history.go(-1); return false;">Tagasi nimekirja juurde<span class="arrow_middle"></span></a>
  <a href="#Next" id="next" class="rightarrow" title="Next">JÄRGMINE<span class="arrow_right"></span></a>
</div> <!-- End content -->

<script type="text/javascript">

$.ajax({
  url: '/admin/api/site/articles.json?per_page=100',
  dataType: 'json',
  success: function(articles) {
    $(articles).each(function(index, article) {

      console.log(article);

      $('div.article').fadeOut(0);        
      $('div.article:first').fadeIn(500);  
      $('a.leftarrow, a.rightarrow').click( function (ev) {

        //prevent browser jumping to top
        ev.preventDefault();

        //get current visible item
        var $visibleItem = $('div.article:visible');

        //get total item count
        var total =  $('div.article').length;

        //get index of current visible item
        var index = $visibleItem.prevAll().length;

        //if we click next increment current index, else decrease index
        $(this).attr('href') === '#Next' ? index++ : index--;

        //if we are now past the beginning or end show the last or first item
        if (index === -1){
          index = total-1;
        }
        if (index === total){
          index = 0
        }

        //hide current show item
        $visibleItem.hide();

        //fade in the relevant item
        $('div.article:eq(' + index + ')').fadeIn(500);

      });                                               
    });
  }
});

日付の値に従って記事を取得する機能を構築するのに苦労しています。

を使用しconsole.log(article)て、次の値を取得します。

body: "..."
comments_count: 0
comments_url: "..."
created_at: "date and time ..."
excerpt: "..."
title: "..."
url: "..."

したがって、ナビゲーションに変数を使用できるはずcreated_atですが、今のところ方法がわかりません。何か案は？

使用した CMS: Edicy 注: CMS は PHP をサポートしていません。

編集: CMS 開発者ドキュメントによって提供される「ブログ」ページの記事一覧のサンプル。

4

3 に答える 3

1

edicy で API を確認しましたが、 でフィルタリングできないようですcreated_at。

ただし、コードに基づいて、クエリ文字列を使用して、特定のページの記事の現在のインデックスを取得できます。

例えば：

http://insenerid.edicy.co/uudised/2013/から始めます。ページ 1 とも呼ばれます。4 つの記事があり?page=1&index={0..3}、各記事の URL に次のように追加する必要があります。

http://insenerid.edicy.co/uudised/2013/aasta-ehitusprojekt-2012-tiitli-kandidaadiksから

http://insenerid.edicy.co/uudised/2013/aasta-ehitusprojekt-2012-tiitli-kandidaadiks?page=1&index=1へ(1 ページの 2 番目の記事であるため)

次に、コードを変更します。

// This is for example: page = 1, index = 1
// You have to write extra code to get the query string you need.
var page = 1, index = 1;
$.ajax({
    url: '/admin/api/site/articles.json?per_page=100&page=' + page,
    // ...
    // Replace
    // $('div.article:first').fadeIn(500);
    // with
    $('div.article:eq(' + index + ')').fadeIn(500);
于 2013-10-22T18:47:38.393 に答える
1

ajax 呼び出しで受信したデータを並べ替える方法について質問がある場合は、それらを使用する前に単に array.sort([compareFunction]) を使用できます。( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sortを参照)

このような：

     ...
     success: function(articles) {

      articles.sort(function (a, b) {
        var d1 = new Date(a.created_at);
        var d2 = new Date(b.created_at);
        if (d1 < d2) return -1;
        if (d1 == d2) return 0;
        return 1;
     });

    $(articles).each(function(index, article) {

      // alert(article.created_at);

      console.log(article);
      ....
于 2013-10-22T19:27:47.983 に答える