作者：SY72 来源： 日期：2024/4/2 17:30:30 人气： 标签：
会员订阅与下载的功能，把过程做成一个【会员订阅系列】进行分享。内容先由简入门，上一篇实现了下载，今天实现前端显示条数。
 文章目录
前言
一、会员订阅功能是什么？
二、使用步骤
1.引入库
2.JS代码
具体案例
总结
前言
提示：这里可以添加本文要记录的大概内容：
知识付费现在已经完全在互联网上流行开了，从文章到小说、从创意到程序、从音乐到影视等等，都需要前后端的订阅控制，所以我们必须了如指掌，并且一学就会。
提示：以下是本篇文章正文内容，下面案例可供参考
一、会员订阅功能是什么？
简而且概之就是，通过前端或后端让用户，根据会员等级看到相应的内容。这个权限可能是长期或一次性或多次性的。
二、使用步骤
1.引入库
//本节内容纯JS实现不用加入jquery库。
2.JS代码
//这里可以控制是否登录或订阅：true可展开；false不能展开
var isLoggedIn = true ;
document.addEventListener(“DOMContentLoaded”, function () {
//设定ID‘showMore’ 为按扭
var showMoreButton = document.getElementById(‘showMore’);
//获取id为table_down的表
var table = document.getElementById(‘table_down’);
var rows = table.rows;
//控制显示数据条数
var initialRowCount = 15;
//做一个全部显示的函数
function toggleRows() {
for (var i = 0; i < rows.length; i++) {
rows[i].style.display = (i < initialRowCount || isLoggedIn) ? ‘’ : ‘none’;
}
showMoreButton.style.display = (rows.length > initialRowCount && !isLoggedIn) ? ‘’ : ‘none’;
}
//点击ID为‘showMore’
showMoreButton.addEventListener(‘click’, function () {
//调用全部显示的函数
toggleRows();
});
//初始显示表的条数
for (var ii = 0; ii < rows.length; ii++) {
rows[ii].style.display = (ii < initialRowCount ) ? ‘’ : ‘none’;
}
});
具体案例
控制显示数据条数
查看更多
总结
这里我们就完成了前端控制用户显示行数的功能了。下一篇，我们加入登录功能，同样我们先从前端入手…
|
【最新评论】
下一篇：没有资料
关相文章：
