jquery脚本获取<div>子节点内容并增加<span>标签:以侧边栏标题增加More+更多内容跳转链接为例

753次阅读
没有评论

热帖最近调整了下主页侧边栏,给“音乐播放器”、“标签云”和“友情链接”栏增加了“More+”更多内容的跳转快捷链接,本文简要记录下实现过程。

需要解决的问题:因为后台 Widget 各个小栏目的标题和内容都是用同一模板函数实现的,如果直接在模板函数上添加“More+”标签链接,会有两个问题,一是所有侧边栏小栏目都会有“More+”小尾巴,二是无法给不同小栏目的“More+”配置不同的跳转链接。

解决思路:给不同小栏目设置 ID,通过 jquery 脚本抓取特定 ID 名称的 <div> 标签,获取 <div> 子节点下的内容,然后改写内容,增加一个 <span> 标签用来实现靠右对齐的“More+”快捷链接。

实现步骤:    //以“音乐播放器”子栏目增加“More+”更多跳转链接为例

1、后台修改“音乐播放器”子栏目类名,通过截断的方式给对应 <div> 标签巧妙的添加 ID:    //默认只能设置 <div> 标签的 class 类名,可以通过 localmusic” id=”localmusic 进行构造

jquery脚本获取<div>子节点内容并增加<span>标签:以侧边栏标题增加More+更多内容跳转链接为例
P1.通过“区块class类”给音乐播放器子栏目父 <div> 构造 ID
© 由 IT摇篮曲 提供

jquery脚本获取<div>子节点内容并增加<span>标签:以侧边栏标题增加More+更多内容跳转链接为例
P2.查看主页 html 源码,音乐播放器父 <div> 的 ID 设置成功
© 由 IT摇篮曲 提供

2、编写 jquery 代码,通过 ID 获取音乐播放器子栏目父 <div> 的内容,在获取的内容后增加 <span> 标签内容,<span> 标签内嵌 <a> 标签,用于设置跳转链接:

$(function(){
//增加span前
//console.log($('#localmusic').children("div").eq(0).html());    //调试用
var divtemp = $('#localmusic').children("div").eq(0).html();
$('#localmusic').children("div").eq(0).html(
divtemp +
"<span style='float:right;font-size:12px'><a href='/MusicLibrary/index.php' style='color:#1c60f3' target='_blank' title='更多音乐...'>More+</a></span>"
);
//增加span后
//console.log($('#localmusic').children("div").eq(0).html());    //调试用
})

3、本地测试无误后,添加到现有主题 js 文件中:    //或者为了方便管理,单独建立一个 js 文件(比如本站的 append.min.js)专门用于边边角角的优化。

jquery脚本获取<div>子节点内容并增加<span>标签:以侧边栏标题增加More+更多内容跳转链接为例
P3.jquery 脚本代码添加到网站主题 js 文件中
© 由 IT摇篮曲 提供

4、验证:清除浏览器缓存,刷新网站首页,发现侧边栏音乐播放器标题右侧已增加了“More+”更多跳转链接,点击该链接,跳转到的链接正确无误。

jquery脚本获取<div>子节点内容并增加<span>标签:以侧边栏标题增加More+更多内容跳转链接为例
P4.给特定侧边栏小栏目增加“More+”更多跳转链接实现效果
© 由 IT摇篮曲 提供
正文完
 
itylq
版权声明:本站原创文章,由 itylq 2023-10-31发表,共计1431字。
转载说明:本站文章遵循CC-4.0国际许可协议,转载请注明出处(格式如“来源:IT摇篮曲www.itylq.com")。
评论(没有评论)