实习小结十：jQuery获取父类class类名，控制不同板块

最新推荐文章于 2024-01-03 11:51:14 发布

原创最新推荐文章于 2024-01-03 11:51:14 发布 · 8.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html #class

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文分享了一次将六个联动效果改为独立联动的过程，通过在HTML中增加外层div并利用PHP动态生成元素来实现。使用jQuery实现了点击切换时的样式更新及交互效果。

呵呵、我又来了，刚刚小伙伴让我把早上做好的，六个联动改成各自联动，我很呵呵，不过还好，一个小时不到就解决了，毕竟有经验了。

html代码：在外层添加了一个div来通过index控制不同的版块，贴出简略版代码。

<div class="company-info">
    <div class="company<?php echo $title_index;?>">
        <h3>
            <span class="title-left">最佳<?php echo ($title[$title_index]) ?>
            </span>                    
        </h3>
        <div style="clear:left;"></div>
        <?php $else_index = 1; ?>
        <?php foreach ($companies as $index => $company) {?>
            <div class="infor<?php echo $else_index;?> info">  

                <div class="selected<?php echo $else_index;?> want-to">
                    <a class="active<?php echo $else_index;?> active" href="/review/company/<?php echo $company->company_id;?>"  style="text-decoration:none;color:#ffffff;" >我要评
                    </a>
                </div>
            </div><!-- info -->
        <?php $else_index++;} ?>
    </div><!-- company-index -->
</div><!-- company-info -->

比较重要的是获取父类的classname，然后重新组成选择器名称。
jQuery代码：

$('#week-best .company-info .want-to a').removeClass('active');
    $('#week-best .company-info .selected1 a').addClass('active'); 

    $("#week-best .company-info .want-to a").hover(function(){
        var name = String( $(this).parent().parent().parent().attr('class') );
        $("#week-best " + "." + name +" .want-to a").removeClass('active');
        $(this).addClass("active");
    },function(){
        $(this).addClass("active");
    });