我想在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没有太多经验，所以对任何明显的错误表示道歉。
非常感谢！
答案 0 :(得分：0)
我看到的唯一问题是，您尚未启动{/ 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'));
});
});
});
答案 1 :(得分：0)
类似于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();
});