0

私はこれをやろうとしています。テーブルから DATE のリストを取得し、それらをリストとして表示し、いつでも 5 のみを表示するこれらの日付を前と次でトラバースする必要があります。例、ページが読み込まれている間、最近の 5 つの日付を表示し、前/次がクリックされると、「リスト」(テーブルから事前入力) を走査し、それに応じて表示します。これはページネーションに似ていますが、要件が非常に単純であるため、ページネーション プラグインを使用したくありません。各リスト/href をクリックすると、ここには表示されていない ajax を介してコンテンツが読み込まれます。

この「前」と「次」がリストの（すでにテーブルから引き出された）をトラバースし、トラバースするときに隠れている残りを5つだけ表示するためだけに助けが必要です。ここにjsfiddleが添付されています。助けてください。ありがとう。

jQuery:

  $( document ).ready(function() {

    $("a.next").click(function(){
        var $toHighlight = $('.active').next().length > 0 ? $('.active').next() : $('.pagination li').first();
        $('.active').removeClass('active');
        $toHighlight.addClass('active');
    });

    $("a.prev").click(function(){
        var $toHighlight = $('.active').prev().length > 0 ? $('.active').prev() : $('.pagination li').last();
        $('.active').removeClass('active');
        $toHighlight.addClass('active');
    });

}); // close jquery

HTML/PHP :

echo "

<div class='pagination pagination-lg'>

<ul class='pagination'>

";
$CID=getinfo(LOGIN);
$SQL = "SELECT DISTINCT date_format(SENTON,'%Y-%m-%d') as DATE from MESSAGES";

$result = mysql_query($SQL,$LINK);
$i=0;
echo "<li id='prev'><a href='#' class='prev'>Prev</a></li>";
while ( $rows = mysql_fetch_array($result,MYSQLI_ASSOC) ) {
  $i++;
 echo "<li><a href='#tab".$CID."day".$i."' id='#tab".$CID."day".$i."' data-toggle='tab' value='$i'>".$rows['DATE']."</a></li>";
 }

 echo "
 <li id='next'><a href='#' class='next'>Next</a></li></ul>


<div id='tab".$CID."day1' class='tab-pane'>
<h4>Day1  Content</h4>
  <p> and so on ...</p>
</div>
<div id='tab".$CID."day2' class='tab-pane'>
  <h4>Day2 Content</h4>
</div>
<div id='tab".$CID."day3' class='tab-pane'>
  <h4>Day3 Content</h4>
</div>

  <div id='tab".$CID."day4' class='tab-pane'>
  <h4>Day4 Content</h4>
</div>

    <div id='tab".$CID."day5' class='tab-pane'>
  <h4>Day5 Content</h4>
</div>

</div>
</div>
 ";

Jsfiddleはこちらhttp://jsfiddle.net/Mg8fr/

4

2 に答える 2

0

あなたはこれが欲しいかもしれません

$( document ).ready(function() {
    $('ul.pagination li').eq(5).nextAll().not('#next').hide().andSelf().siblings().eq(1).addClass('active');
    $("a.next").click(function(){
    var $toHighlight = $('.active').next().not('a#next').length > 0 ? $('.active').next() : $('.pagination li').eq(1);
    if($toHighlight.attr('id') == 'next') {
        $('.active').removeClass('active');
        $('ul.pagination li').not('#next').not('#prev').hide()
        .eq(0).addClass('active').nextAll("*:lt(4)").andSelf().show();
    }
    else if(!$toHighlight.is(':visible')){
        $('.active').hide().removeClass('active');
        $toHighlight.nextAll("*:lt(5)").andSelf().show();
        $toHighlight.addClass('active').prevAll().not('#prev').hide();
    }
    else {
        $('.active').removeClass('active');
        $toHighlight.addClass('active');
        }
    });

    $("a.prev").click(function(){
        var $toHighlight = $('.active').prev().not('#prev').length > 0 ? $('.active').prev() : $('.pagination li').eq($('ul.pagination li').length-2);
        if($toHighlight.attr('id') == 'prev') {
            $('.active').removeClass('active');
            $('ul.pagination li').not('#next').not('#prev').hide();
            $('ul.pagination li#next').addClass('active');
            $('.active').prevAll("*:lt(4)").andSelf().show();
        }
        else if(!$toHighlight.is(':visible')){
            $('.active').removeClass('active');
             $('ul.pagination li').not('#next').not('#prev').hide();
             $toHighlight.addClass('active').prevAll("*:lt(4)").andSelf().show();
        }
        else {
            $('.active').removeClass('active');
            $toHighlight.addClass('active');
        }
    });

}); // close jquery

デモ。

于 2013-09-08T04:30:57.217 に答える