jquery - Jquery 事件和选择器问题

Question

我是 jquery 的新手，所以如果我的问题没有很好地表达，请原谅我，我只是没有很好的语义线索来表达它。

我正在使用嵌套轮播展示来自 wordpress 网站的内容（使用 twitter 引导程序）

<div id="outer-carousel" class="carousel slide well" data-interval="false">
    <div class="carousel-inner">

        <div class="item active">
            <div id="nested-carousel1" class="carousel slide well">
                <div class="carousel-inner">
                    <div class="item active">
                        <center>
                        item1
                        </center>
                    </div>
                    <div class="item">
                        <center>
                        item2
                        </center>
                    </div>
                    <div class="item">
                        <center>
                        item3
                        </center>
                    </div>
                </div>
                <a class="carousel-control left" href="#nested-carousel1" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#nested-carousel1" data-slide="next">&rsaquo;</a>
            </div>
        </div>

        <div class="item">          
            <div id="nested-carousel2" class="carousel slide well">
                <div class="carousel-inner">
                    <div class="item">
                        <center>
                        item4
                        </center>
                    </div>
                    <div class="item">
                        <center>
                        item5
                        </center>
                    </div>
                    <div class="item">
                        <center>
                        item6
                        </center>
                    </div>
                </div>
                <a class="carousel-control left" href="#nested-carousel2" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#nested-carousel2" data-slide="next">&rsaquo;</a>
            </div>
        </div>

        <div class="item">          
            <div id="nested-carousel3" class="carousel slide well">
                <div class="carousel-inner">
                    <div class="item">
                        <center>
                        item7
                        </center>
                    </div>
                    <div class="item">
                        <center>
                        item8
                        </center>
                    </div>
                    <div class="item">
                        <center>
                        item9
                        </center>
                    </div>
                </div>
                <a class="carousel-control left" href="#nested-carousel3" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#nested-carousel3" data-slide="next">&rsaquo;</a>
            </div>

        </div>
    </div>
</div>
<ul class="thumbnails">
    <li class="span1">
        <a class="thumbnail" href="#outer-carousel" data-slide-to="0">
            carousel1
        </a>
    </li>
    <li class="span1">
        <a class="thumbnail" href="#outer-carousel" data-slide-to="1">
            carousel2
        </a>
    </li>
    <li class="span1">
        <a class="thumbnail" href="#outer-carousel" data-slide-to="2">
            carousel3
        </a>
    </li>
</ul>

当用户单击缩略图时，“外部”轮播会更改幻灯片

每张幻灯片都包含一个“内部”旋转木马，该旋转木马用左右箭头进行操作。

不过我有一个问题，因为当我滑动“外部”轮播时，应该将“内部”轮播的第一个“项目”分配给“活动”类。

好消息是：twitter bootstrop 在更改幻灯片时提供了“滑动”事件。

所以我可以在正确的“内部”轮播中设置第一个“项目”的类。

    $('#outer-carousel').on('slid', function(e) {    
    // insert class assignment here
});

在这里查看所有这些操作：http: //jsfiddle.net/4hgcY/29/

然而，我的问题是，我只想在“外部”旋转木马滑动时才这样做。但正如您在 jsfiddle 中看到的那样，通过滑动内部轮播触发的“slid”事件也会导致上述 Jquery 调用该函数......

我该怎么办？我试过使用选择器

    $('#outer-carousel').on('slid', '#outer-carousel",function(e) {    
    // insert class assignment here
});

但它不起作用

Answer 1

只需确保事件发生在目标轮播上即可。

if (this === e.target) {
    // do stuff
}