jquery - 4个jCarousel实例，只有最后一个有效

Question

我正在研究http://staticstore.cambiumlearning.com/。有一个#tabInnerContainer元素有四个<ul class="tabItem">实例，我试图在每个实例上运行 jCarousel，但似乎只有最后一个实例有效！我什至尝试通过它们的 ID 单独初始化它们，但仍然 - 只有最后一个引用的会运行！

抱歉，如果这太模糊了；如果需要，我很乐意提供更多信息。TIA 任何人都可以给我任何帮助！

Answer 1

每个轮播都有一对箭头，但是您的箭头彼此重叠（最后一个轮播具有更高的 z-index），这就是为什么只有最后一个 UL 在点击时被更改。您应该将“隐藏”类放在 UL 和箭头的容器上，而不是放在 UL 本身上。

function selectTab(thing) {
    $('#tabContainer .tabs a').each(function(index) {
        $(this).removeClass('tabSelected');
    });
    $(thing).addClass('tabSelected');
    $('#tabInnerContainer ul.tabItem').each(function(index) {
        if ($(this).attr('data-category') === $(thing).attr('data-category')) {
            $(this).parent('.jcarousel-skin-tango').removeClass('hide');
            //alert($(this).attr('id') + ' should be visible!');
        } else if ($(this).attr('data-category') != $(thing).attr('data-category')) {
            $(this).parent('.jcarousel-skin-tango').addClass('hide');
        }
    });
}