jQuery列表中的下一个上一页仅显示5个并隐藏其他 [英] next prev in jquery list to show only 5 and hide others

问题描述

我正在尝试这样做.我从表中获取DATE的列表，并将其显示为列表，并希望上一个和下一个遍历这些日期仅显示5个日期.例如，当页面加载时，我将显示最近的5个日期，并单击prev/next，使其遍历列表"(从表中预先填充)并进行相应显示.这就像分页，但是我真的不想使用分页插件，因为我的要求非常简单.当单击每个列表/href时，它将通过ajax加载内容，此处未显示，因为对我来说很好.

I am trying to do this. I fetch the list of DATE's from the table and show them as list and want the prev and next to traverse these date's showing only the 5 at any time. Example, while the page loaded, i will display the recent 5 date's and when prev / next are clicked let it traverse the "lists"(pre-populated from the table) and show accordingly. This is like pagination but i dont really want to use a pagination plugin as my requirement is very simple. when each list/href is clicked, it loads up the content through ajax which is not shown here as that works fine for me.

我仅需要帮助使此上一个"和下一个"遍历列表(已经从表中拉出)，并且在遍历时仅显示5个隐藏的其余部分. jsfiddle附在这里.请帮忙.谢谢.

I need help only to the make this "prev" and "next" traverse the list's(already pulled from table) and show only 5 hiding rest as it traverses. jsfiddle is attached here. please help. thanks.

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/

Jsfiddle here http://jsfiddle.net/Mg8fr/

推荐答案

您可能想要这个

$( 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

DEMO.

这篇关于jQuery列表中的下一个上一页仅显示5个并隐藏其他的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！