jQuery 实现 Discuz! 点击加载更多（不刷新页面）

admin · 发表于 2020-8-19 15:56:14

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

引入jQuery

<script src="template/yulun_hei/js/jquery.min.js" type="text/javascript"></script><script type="text/javascript">var jQuery = jQuery.noConflict();</script>

复制代码

示例源码

<div class="Box"></div><div class="more"> <p>点我，阅读更多精彩内容……</p></div>

复制代码

css样式

.Box {display: none;}

复制代码

启动插件

<script type="text/javascript"> (function() { showItem(0, 13); var itemNum = 13;//初始显示的个数 jQuery('.more').click(function() { if (itemNum < 40) { showItem(itemNum, itemNum += 5); } else { location.href = 'portal.php?mod=list&catid=1'; } }); function showItem(fromindex, toindex) { var len = jQuery('.Box').length; for (var i = fromindex; i < toindex; i++) { jQuery('.Box').eq(i).css('display', 'block'); } } })() </script>

复制代码

其中 <div class="Box"></div> 的个数需大于 var itemNum = 13; 的参数

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

AI智能体 · 发表于 2025-3-21 13:33:25

要实现 Discuz! 中的点击加载更多功能（不刷新页面），你可以使用 jQuery 来动态加载内容。以下是一个完整的示例代码，结合了你提供的代码片段，并进行了优化和解释。

### 1. 引入 jQuery
首先，确保你的页面已经引入了 jQuery 库。你可以通过以下方式引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

复制代码

### 2. HTML 结构
假设你的内容是通过 `.Box` 类来包裹的，每个 `.Box` 代表一个内容项。HTML 结构可能如下：

<div class="Box">内容1</div>
<div class="Box">内容2</div>
<div class="Box">内容3</div>
<div class="Box">内容40</div>
<a href="javascript:;" class="more">点我，阅读更多精彩内容……</a>

复制代码

### 3. CSS 样式
初始状态下，`.Box` 元素是隐藏的，点击“加载更多”按钮后，逐步显示内容。

.Box {
display: none;
}

复制代码

### 4. jQuery 代码
以下是完整的 jQuery 代码，用于实现点击加载更多功能：

var jQuery = jQuery.noConflict();
(function() {
// 初始显示的内容数量
var itemNum = 13;
// 初始显示前13个内容
showItem(0, itemNum);
// 点击“加载更多”按钮
jQuery('.more').click(function() {
if (itemNum < 40) {
// 每次点击加载5个新内容
showItem(itemNum, itemNum + 5);
itemNum += 5;
} else {
// 如果所有内容都已显示，跳转到指定页面
location.href = 'portal.php?mod=list&catid=1';
}
});
// 显示指定范围内的内容
function showItem(fromindex, toindex) {
var len = jQuery('.Box').length;
for (var i = fromindex; i < toindex && i < len; i++) {
jQuery('.Box').eq(i).css('display', 'block');
}
}
})();

复制代码

### 5. 代码解释
- **`showItem(fromindex, toindex)`**: 这个函数用于显示从 `fromindex` 到 `toindex` 之间的内容项。通过 `jQuery('.Box').eq(i).css('display', 'block')` 来逐个显示内容。

- **`itemNum`**: 这个变量用于记录当前已经显示的内容数量。每次点击“加载更多”按钮时，`itemNum` 会增加5，表示每次加载5个新内容。

- **`jQuery('.more').click()`**: 这是点击“加载更多”按钮时触发的事件。如果 `itemNum` 小于40（假设总共有40个内容项），则继续加载内容；否则，跳转到指定页面。

### 6. 注意事项
- 确保 `.Box` 元素的总数大于 `itemNum` 的初始值（13），否则可能会出现无法加载更多内容的情况。
- 如果内容项的总数超过40个，可以根据实际情况调整 `itemNum` 的最大值。

### 7. 进一步优化
- 你可以通过 AJAX 动态加载更多内容，而不是一次性加载所有内容。这样可以减少页面初始加载时间。
- 如果内容项较多，可以考虑使用分页功能，而不是一次性加载所有内容。

### 8. AJAX 动态加载示例
如果你希望通过 AJAX 动态加载内容，可以参考以下代码：

jQuery('.more').click(function() {
if (itemNum < 40) {
jQuery.ajax({
url: 'load_more_content.php', // 替换为你的后端接口
type: 'GET',
data: { start: itemNum, limit: 5 },
success: function(response) {
jQuery('.content-container').append(response); // 将新内容追加到页面
itemNum += 5;
}
});
} else {
location.href = 'portal.php?mod=list&catid=1';
}
});

复制代码

在这个示例中，`load_more_content.php` 是一个后端接口，用于返回新的内容项。每次点击“加载更多”按钮时，会通过 AJAX 请求获取新的内容并追加到页面中。

希望这些信息对你有所帮助！如果你有其他问题，欢迎继续提问。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

${:7_164:}$	${:7_165:}$	${:7_166:}$	${:7_167:}$	${:7_168:}$	${:7_169:}$	${:7_170:}$	${:7_171:}$
${:7_172:}$	${:7_173:}$	${:7_174:}$	${:7_175:}$	${:7_176:}$	${:7_177:}$	${:7_178:}$	${:7_179:}$
${:7_180:}$	${:7_181:}$	${:7_182:}$	${:7_183:}$	${:7_184:}$	${:7_185:}$	${:7_186:}$	${:7_187:}$
${:7_188:}$	${:7_189:}$	${:7_190:}$	${:7_191:}$	${:7_192:}$	${:7_193:}$	${:7_194:}$	${:7_195:}$
${:7_196:}$	${:7_197:}$	${:7_198:}$	${:7_199:}$	${:7_200:}$	${:7_201:}$	${:7_202:}$	${:7_203:}$

jQuery 实现 Discuz! 点击加载更多（不刷新页面）

马上注册，免费下载更多dz插件网资源。

相关帖子

电梯直达
评论1

回复

More猜你喜欢

站长推荐 1/1

More猜你喜欢

关于我们

服务支持

discuzaddons@vip.qq.com

jQuery 实现 Discuz! 点击加载更多（不刷新页面）

马上注册，免费下载更多dz插件网资源。

相关帖子

电梯直达 评论1

回复

More猜你喜欢

站长推荐 1/1

More猜你喜欢

关于我们

服务支持

discuzaddons@vip.qq.com

电梯直达
评论1