javascript - 删除导航栏的类 - 正确

Question

此问题的基本视觉效果可在 http://sevenx.de/demo/bootstrap-carousel/inc.carousel/tabbed-slider.html 获得。 - 如果你想看一看。

但这是正在发生的事情。

标签式轮播背后的 HTML 和 CSS 如下。 (为了简洁起见，我只是缩短了它。)

<style>

    #myCarousel-100 .nav a small {
            display:block;
    }
    #myCarousel-100 .nav {
            background:#eee;
    }
    #myCarousel-100 .nav a {
            border-radius: 0px;
    }
</style>

<div class="container">

    <div id="myCarousel-100" class="carousel slide" data-ride="carousel">

        <div class="carousel-inner"><!-- Wrapper for slides -->

            <div class="item active">
                panel 1 content
            </div><!-- End Item -->

            <div class="item active">
                panel 2 content
            </div><!-- End Item -->

        </div><!-- /Wrapper for slides -->


        <ul class="nav nav-pills nav-justified">
            <li data-target="#myCarousel-100" data-slide-to="0" class="active"><a href="#">panel 1</a></li>
            <li data-target="#myCarousel-100" data-slide-to="1"><a href="#">panel 2</a></li>
        </ul>


    </div><!-- End Carousel -->
</div>                

足够简单...

要开始表演，我们只需要在页脚处粘贴以下 JS。只要 boostrap 和 jQuery 也在附近，事情就会成功。

<script>
        $('#myCarousel-100').carousel({
                interval:   4000 
        });

        var clickEvent = false;
        $('#myCarousel-100').on('click', '.nav a', function() {
                        clickEvent = true;
                        $('.nav li').removeClass('active');
                        $(this).parent().addClass('active');        
        }).on('slid.bs.carousel', function(e) {
                if(!clickEvent) {
                        var count = $('.nav').children().length -1;
                        var current = $('.nav li.active');
                        current.removeClass('active').next().addClass('active');
                        var id = parseInt(current.data('slide-to'));
                        if(count == id) {
                                $('.nav li').first().addClass('active');    
                        }
                }
                clickEvent = false;
        });
</script>    

就是这样。

首先，这里的问题在哪里？好吧，没有任何。

嗯，有点……

只要您没有另一个类似的选项卡式轮播，就完全没有问题。

但是，假设您想要另一个实例，例如 ID 为 myCarousel-200。

那么，您可以复制代码并将每次出现的 -100 更改为 -200，就可以了。正确的？没有。

除了 onclick 事件发生时(在任何一个实例上)，一切都会正常工作，最后一次点击的点击外观在其他轮播也会受到影响.

因此，例如，您单击第一个轮播的面板 2，您将看到面板 2 的内容将加载到第一个轮播 View 端口中。面板 2 下方的链接将以蓝色高亮显示。到目前为止，一切都很好。

尽管如此，如果您点击另一个 slider 的面板 1 或 2，您会发现第一个轮播的最后一个点击元素的蓝色背景也会消失.届时，第一个轮播将完全没有点击元素外观。你肯定不想要这种行为。

现在，为什么会这样？

发生这种情况是因为 JS 代码有这样的调用；

 $('.nav li').removeClass('active'); 

这段代码写得不好，因为没有 namespace 可以定位所需轮播中的 nav li 元素，从而将操作范围缩小到仅相关的轮播。

为了补救这种情况，我尝试了以下...但它没有用...

$('#myCarousel .nav li').removeClass('active'); 

我做错了什么？

Answer 1

尝试

$(this).closest('.nav').find('li').removeClass('active');