<ul> 列表在显示/隐藏 div 中的多个分页答案

【问题标题】：Multiple pagination of <ul> lists inside show/hide div<ul> 列表在显示/隐藏 div 中的多个分页
【发布时间】：2015-07-14 13:24:17
【问题描述】：

我想在用户点击相关链接时显示/隐藏的 div 部分中进行分页。也就是我要本站指定的效果：http://papermashup.com/jquery-show-hide-plugin/和这篇stackoverflow文章中给出的代码：jquery pagination through multiple ul lists一起。

我在文件 jscode.js 中包含了以下 javascript 代码

function check_navigation_display(el) {
//accepts a jQuery object of the containing div as a parameter
if ($(el).find('ul').children('li').first().is(':visible')) {
    $(el).children('.prev').hide();
} else {
    $(el).children('.prev').show();
}

if ($(el).find('ul').children('li').last().is(':visible')) {
    $(el).children('.next').hide();
} else {
    $(el).children('.next').show();
}    
}

(function ($) {
$.fn.showHide = function (options) {

    //default vars for the plugin
    var defaults = {
        speed: 1000,
        easing: '',
        changeText: 0,
        showText: 'Show',
        hideText: 'Hide'

    };
    var options = $.extend(defaults, options);

    $(this).click(function () { 

         $('.toggleDiv').slideUp(options.speed, options.easing);    
         // this var stores which button you've clicked
         var toggleClick = $(this);
         // this reads the rel attribute of the button to determine which div id to toggle
         var toggleDiv = $(this).attr('rel');
         // here we toggle show/hide the correct div at the right speed and using which easing effect
         $(toggleDiv).slideToggle(options.speed, options.easing, function() {
         // this only fires once the animation is completed
         if(options.changeText==1){
         $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
         }
          });

      return false;

    });

};

$('div.paginate').each(function () {
    $(this).append('<a class="prev">prev</a> | <a class="next">next</a>');
    $(this).find('ul li:gt(4)').hide();

    check_navigation_display($(this));

    $(this).find('.next').click(function () {
        var last = $(this).siblings('ul').children('li:visible:last');
        last.nextAll(':lt(5)').show();
        last.next().prevAll().hide();
        check_navigation_display($(this).closest('div'));
    });

    $(this).find('.prev').click(function () {
        var first = $(this).siblings('ul').children('li:visible:first');
        first.prevAll(':lt(5)').show();
        first.prev().nextAll().hide()
        check_navigation_display($(this).closest('div'));
    });

});
})(jQuery);

我的html代码很简单：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="jscode.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){


$('.show_hide').showHide({           
    speed: 1000,  // speed you want the toggle to happen    
    easing: '',  // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
    changeText: 1, // if you dont want the button text to change, set this to 0
    showText: 'Show Datums',// the button text to show when a div is closed
    hideText: 'Hide Datums' // the button text to show when a div is open

}); 


});

</script>

<a href="#" class="show_hide" rel="#slidingDiv_1"> Show Datums </a> <br />
            <div id="slidingDiv_1" style="height:300px; padding:20px; margin-top:10px; border-bottom:5px; solid #3399FF; display:none;">
                <div class="paginate">
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                        <li>11</li>
                        <li>12</li>
                        <li>13</li>
                        <li>14</li>
                        <li>15</li>
                        <li>16</li>
                        <li>17</li>
                        <li>18</li>
                        <li>19</li>
                        <li>20</li>
                        <li>21</li>
                    </ul>
                </div>
            </div>
 <br/>
 <a href="#" class="show_hide" rel="#slidingDiv_2"> Show Datums </a> <br />
            <div id="slidingDiv_2" style="height:300px; padding:20px; margin-top:10px; border-bottom:5px; solid #3399FF; display:none;">
                <div class="paginate">
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                        <li>11</li>
                        <li>12</li>
                        <li>13</li>
                        <li>14</li>
                        <li>15</li>
                        <li>16</li>
                        <li>17</li>
                        <li>18</li>
                        <li>19</li>
                        <li>20</li>
                        <li>21</li>
                    </ul>
                </div>
            </div>

但上面的代码不起作用。 jsfiddle链接为：https://jsfiddle.net/axnktcvL/

你们知道我做错了什么吗？我对 JQuery 没有太多经验，因此对任何明显的错误表示歉意。

非常感谢！

【问题讨论】：

它正在工作（显示下一个和上一个lis）。你到底期望什么工作，你能解释一下吗？
我想要的是，当我单击 2 个“显示基准”中的任何一个（单击链接时，文本将更改为“隐藏基准”）时，将打开一个 div。在 div 内，将显示 5 个列表元素，分别显示 'prev' 和 'next'。当我点击“隐藏基准”时，div 将被隐藏。那清楚吗？请告诉我！

标签： javascript jquery html pagination

【解决方案1】：

我看到的唯一问题是，你还没有像showHide一样启动插件

$('.show_hide').showHide();

(function($) {
  $.fn.showHide = function(options) {

    //default vars for the plugin
    var defaults = {
      speed: 1000,
      easing: '',
      changeText: 0,
      showText: 'Show',
      hideText: 'Hide'

    };
    var options = $.extend(defaults, options);

    $(this).click(function() {

      $('.toggleDiv').slideUp(options.speed, options.easing);
      // this var stores which button you've clicked
      var toggleClick = $(this);
      // this reads the rel attribute of the button to determine which div id to toggle
      var toggleDiv = $(this).attr('rel');
      // here we toggle show/hide the correct div at the right speed and using which easing effect
      $(toggleDiv).slideToggle(options.speed, options.easing, function() {
        // this only fires once the animation is completed
        if (options.changeText == 1) {
          $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
        }
      });

      return false;

    });

  };
})(jQuery);

jQuery(function($) {
  function check_navigation_display(el) {
    //accepts a jQuery object of the containing div as a parameter
    if ($(el).find('ul').children('li').first().is(':visible')) {
      $(el).children('.prev').hide();
    } else {
      $(el).children('.prev').show();
    }

    if ($(el).find('ul').children('li').last().is(':visible')) {
      $(el).children('.next').hide();
    } else {
      $(el).children('.next').show();
    }
  }


  $('.show_hide').showHide();
  $('div.paginate').each(function() {
    $(this).append('<a class="prev">prev</a> | <a class="next">next</a>');
    $(this).find('ul li:gt(4)').hide();

    check_navigation_display($(this));

    $(this).find('.next').click(function() {
      var last = $(this).siblings('ul').children('li:visible:last');
      last.nextAll(':lt(5)').show();
      last.next().prevAll().hide();
      check_navigation_display($(this).closest('div'));
    });

    $(this).find('.prev').click(function() {
      var first = $(this).siblings('ul').children('li:visible:first');
      first.prevAll(':lt(5)').show();
      first.prev().nextAll().hide()
      check_navigation_display($(this).closest('div'));
    });

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="show_hide" rel="#slidingDiv_1"> Show Datums </a> 
<br />
<div id="slidingDiv_1" style="height:300px; padding:20px; margin-top:10px; border-bottom:5px; solid #3399FF; display:none;">
  <div class="paginate">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
    </ul>
  </div>
</div>
<br/>
<a href="#" class="show_hide" rel="#slidingDiv_2"> Show Datums </a> 
<br />
<div id="slidingDiv_2" style="height:300px; padding:20px; margin-top:10px; border-bottom:5px; solid #3399FF; display:none;">
  <div class="paginate">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
    </ul>
  </div>
</div>

【讨论】：

所以我需要在我的 jscode.js 文件中包含声明 $('.show_hide').showHide();，就在 $('div.paginate').each(function () { 行之前，对吗，先生？
是的，你是对的！它的工作:) 非常感谢，先生！

【解决方案2】：

类似this?

而且你不需要插件来显示和隐藏

我已经写了下面的代码。请看一下

$('.show_hide').click(function(e){
    e.preventDefault();
    var $this = $(this);
    var $text = ($(this).text().trim() == "Show Datums") ? "Hide Datums" : "Show Datums";
    $this.text($text);
    $($this.attr('rel')).slideToggle();
});

【讨论】：