javascript - tab自动切换，根据属性切换不同风格-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - tab自动切换，根据属性切换不同风格

大家讲道理 2017-04-11 11:33:47

[JavaScript讨论组]

421

问题描述：
如标题，通过data-toggle="autoplay*" 和data-speed 属性控制页面tab切换的自动滚动状态
给.tab添加和属性一样的class之后，遍历思路乱了，，各位帮看看~
思路：
1.通过data-toggle 属性值分别给.tab添加和属性值对应的class, 然后根据不同的class去遍历子元素li，

 通过 data-speed 获取切换间隔时间 从而实现切换

HTML：


    

        

            html 
            css 
        
    
    
            html
        
        
            css
        
    
    
      ....
    
   $('.tab').each(function () {
        var  e      = $(this);
        var trigger =e.attr('data-toggle');
        var filterplay = e.attr('data-toggle').match(/^autoplay.*/)+'';
        if(trigger ==filterplay ){
            $('.tab[data-toggle='+filterplay+''+']').addClass(filterplay);
        }
    });
    .....

大家讲道理

光阴似箭催人老，日月如移越少年。

全部回复(1)

大家讲道理2017-04-11 11:35:47 1楼

我认为：理解遍历是关键。

$.fn.each(function(){
    var  $this = $(this); // 这里的 $this 已经是唯一了，接下来就可以直接基于该对象查找出其子对象，无需使用 $('.tab[***]')；
})

不知道你使用 addClass 是何意思，但，如果是需要调整样式，那么可以试试：

var $this = $(this), 
    trigger = $this.attr('data-toggle');
    
// ① var filterplay = e.attr('data-toggle').match(/^autoplay.*/)+'';
// filterplay = autoplay*

// ② $('.tab[data-toggle="'+ filterplay +'"]').addClass(filterplay);
// 既然 filterplay = autoplay*；
// 那么 【data-toggle=filterplay】 = 【data-toggle="autoplay*"】；
// 因为 你使用 $this 的属性，再查找 data-toggle 对应的 .tab 元素，其实还是在操作 $this 啊；
// 所以 你只是想给 $this 添加一个 autoplay* 样式；
// 使其变为： <p class="tab autoplay2" data-toggle="autoplay2"  data-speed="1500"> 这样的效果；

// 是否存在该样式
if ( $this.hasClass( trigger ) ) {
    // 如果已经存在样式则无需再次添加样式了
    return;
} else {
    // 否则直接添加样式
    $this.addClass( trigger );
}

js 中单引号和双引号的使用一定要整清楚：

$('.tab[data-toggle="'+ filterplay +'"]').addClass(filterplay);

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>