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

问题描述

问 题

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

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

HTML：

<div class="tab" data-toggle="autoplay1"  data-speed="2000">
    <div class="tab-head">
        <ul>
            <li class="active"><a href="#tab-start1">html</a> </li>
            <li><a href="#tab-css1">css</a> </li>
        </ul>
    </div>
    <div class="tab-body>
        <div class="tab-panel active" id="tab-start1">
            html
        </div>
        <div class="tab-panel" id="tab-css1">
            css
        </div>
    </div>
    <div class="tab" data-toggle="autoplay2"  data-speed="1500">
      ....
    </div>
   $('.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);
        }
    });
    .....

解决方案

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

$.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* 样式；
// 使其变为： <div 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);

这篇关于javascript - tab自动切换，根据 属性切换不同风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！