javascript - 显示/隐藏 div 中 <ul> 列表的多个分页

Question

我想在 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 没有太多经验，因此对于任何明显的错误深表歉意。

非常感谢!

Answer 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>