选项卡中的多个轮播

Question

我有一堆选项卡，每个选项卡都应该包含一个轮播（例如 Tab1 到 Carousel1，Tab2 到 Carousel2 等）但是只有第一个选项卡的轮播呈现。我已经尝试了从生成唯一 ID 到使用类选择器的所有方法，但仍然无法让它按需要工作。谢谢

带有剃须刀钩的 HTML

<div class="tabbable">
    <ul id="myTab" class="nav nav-tabs">
        @{int incs=0;}
        @foreach(var row in db.Query(queryCategory))
        {
            <li><a href="#@row.Category_ID" data-toggle="tab">@row.Category_Name</a></li>
        }
    </ul>
    <div class="tab-content">

    @{bool first = true;}

    @foreach(var row in db.Query(queryCategory))
    {
        var ids= @row.Category_ID;
        <div class="@{if (first){<text>tab-pane active</text> first = false;}else{<text>tab-pane</text>}}" id=@ids>
            <p>I'm in @row.Category_Name.</p>

            <ul id="@("customselect"+@incs++)" class="elastislide-list carousel">
                @foreach(var row1 in db.Query("SELECT * FROM Food WHERE Category_ID = @0", ids))
                {
                    <li><a href="@row1.Food_ID" class="link">
                        <div class="image-box"><img src="img/food.jpg"></div> 
                        <span>@row1.Food_Name</span>
                        </a>
                    </li>
                } 
            </ul>              
        </div>
        }
</div><!--tabbable-->

jQuery

$('.carousel').each(function(index) {
    $(this).elastislide();
});

Answer 1

当标签改变时尝试调用 .elastislide()。

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
    $("div.tab-content").find('ul.carousel').elastislide();
});