Question

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

我使用嵌套轮播（使用Twitter bootstrap）从wordpress网站呈现内容

<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 boots在更换幻灯片时提供“滑动”事件。

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

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

在这里看到这一切： http://jsfiddle.net/4hgcY/29/

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

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

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

但它不起作用

Answer 1

确保事件发生在目标轮播上。

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

Jquery事件和选择器问题

1 个答案: