jQuery slider 问题

Question

我是 jQuery 的新手，所以我尝试遵循这个 tutorial然后后来尝试将其调整为我自己的。但我不是很成功。首先，我在同一页面上多次使用相同的 slider 。第一个 slider 工作正常但另一个 slider 不起作用。如果你滚动它会继续一点所以你看到的是背景而不是图片。如果您想在此处查看网站 it's我不知道它是否是 css 问题 :S

这是 html 代码:

div id="sliderTab1">                        
        <div class="scroll-pane">
            <div class="scroll-content">
                <?php include("designRetouch.php")?>
            </div>
            <div class="scroll-bar-wrap">
                <div class="scroll-bar"></div>
            </div>
        </div>    
    </div> 

还有 3 次。

这里是 slider 滚动条的 jQuery 以及如何显示 slider

        function sizeScrollbar(){
        var remainder = scrollContent.width() - scrollPane.width();
        var proportion = remainder / scrollContent.width();
        var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );

        scrollbar.find(".ui-slider-handle").css({
            width : handleSize,
            "margin-left":-handleSize/2,
        });
        handleHelper.width("").width(scrollbar.width() - handleSize);
    }

和...

$("#tab1").click(function(){
        $('li[id^="tab"]').removeClass('current');
            $("#tab1").addClass('current');

        $('div[id^="sliderTab"]').hide();
            $('#sliderTab1').slideToggle('slow');
    });

Answer 1

未经测试，但根据类似的经验，您需要为每个 sliderTab 提供不同的 id，例如

然后你需要运行初始化的 jquery 函数来运行每一个，例如:

 $("#tab1").click(function(){
    $('li[id^="tab"]').removeClass('current');
        $("#tab1").addClass('current');

    $('div[id^="sliderTab"]').hide();
        $('#sliderTab1').slideToggle('slow');
});

$("#tab1").click(function(){
    $('li[id^="tab"]').removeClass('current');
        $("#tab2").addClass('current');

    $('div[id^="sliderTab"]').hide();
        $('#sliderTab2').slideToggle('slow');
});

等等。至少那是我要开始的地方。