JQ实现点击载入内容

最新推荐文章于 2018-09-30 14:42:31 发布

破晓亦晨

最新推荐文章于 2018-09-30 14:42:31 发布

阅读量387

点赞数

<!DOCTYPE html>
<html >

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery showMore 显示更多</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var showMoreNChildren = function($children, n) {
//显示某jquery元素下的前n个隐藏的子元素
var $hiddenChildren = $children.filter(":hidden");
var cnt = $hiddenChildren.length;
for (var i = 0; i < n && i < cnt; i++) {
$hiddenChildren.eq(i).show();
}
return cnt - n; //返回还剩余的隐藏子元素的数量
}
jQuery.showMore = function(selector) {
if (selector == undefined) {
selector = ".showMoreNChildren"
}
//对页中现有的class=showMorehandle的元素，在之后添加显示更多条，并绑定点击行为
$(selector).each(function() {
var pagesize = $(this).attr("pagesize") || 10;
var $children = $(this).children();
if ($children.length > pagesize) {
for (var i = pagesize; i < $children.length; i++) {
$children.eq(i).hide();
}
$("<div class='showMorehandle' ><i></i>显示更多</div>").insertAfter($(this)).click(function() {
if (showMoreNChildren($children, pagesize) <= 0) {
//如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条”
$(this).hide();
};
});
}
});
}
})();
</script>
</head>

<body>
<div class="showMoreNChildren" pagesize="5">
<div>
111
</div>
<div>
111
</div>
<div>
111
</div>
<div>
111
</div>
<div>
111
</div>
<div>
111
</div>
<div>
111
</div>
<div>
111
</div>
<div>
111
</div>
<div>
111
</div>
<div>
111
</div>
<div>
111
</div>
<div>
111
</div>
<div>
111
</div>
<div>
111
</div>
<div>
111
</div>
<div>
111
</div>
<div>
111
</div>
<div>
111
</div>
</ul>
<script type="text/javascript">
//调用显示更多插件。参数是标准的 jquery 选择符
$.showMore(".showMoreNChildren,.mynews");
</script>
</body>

</html>

破晓亦晨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQ实现点击载入内容

jquery showMore 显示更多(function() {var showMoreNChildren = function($children, n) {//显示某jquery元素下的前n个隐藏的子元素var $hiddenChildren = $children.filter(":hidden");var cnt = $hiddenChildren.lengt
复制链接

扫一扫