苹果CMS播放列表集数JS正序倒序切换实现教程

一、功能实现原理

通过JavaScript的reverse()数组反转函数，可实现页面列表元素顺序反转切换。结合点击触发事件，能够完成苹果CMS视频播放集数列表的正序、倒序来回切换，代码精简、运行高效，适配各类苹果CMS模板播放页。

二、页面布局HTML结构

设置触发切换的点击按钮与播放列表容器，通过专属class和id精准绑定交互事件，结构简洁通用。

<div class="pgcmsmb">点击我</div>
<ul id="123">
    <li>我第一</li>
    <li>我第二</li>
    <li>我老三</li>
</ul>

三、正序倒序切换JS代码

核心仅需一行逻辑代码，点击指定按钮即可反转列表元素顺序，重复点击可循环切换排序状态，完美适配播放集数排序场景。

$(".pgcmsmb").click(function(){
    $('#123').HTML($('#123').children().get().reverse());
});

四、代码适配说明

该段JS代码可直接迁移至苹果CMS播放列表模块，只需将代码中的容器ID、按钮Class替换为模板实际播放列表对应属性，即可实现视频集数一键正序倒序切换功能，无需复杂修改，兼容性强。