Question

我有一个网站，我展示了3个“抽奖”。在每次抽奖中都有全屏显示的图片。使用功能，您可以在绘图之间切换。在每个绘图中，您可以移动滑块（uislider）以显示较旧的图片。目前我有3次相同的功能（当然是不同的类）和3次滑块（每次抽奖）。它可以工作，但我想将它们组合成一个功能和一个滑块，它可以浏览我所显示的绘图的图片。如果您更改绘图并返回，则滑块应保持位置。

这是我的代码：

HTML：

    <div class="drawSelect3"> 

        <div class="draw3">
                <img src="Bilder/03/03_01.03.16.jpg"/>
                <img src="Bilder/03/03_01.02.16.jpg"/>
                <img src="Bilder/03/03_01.01.16.jpg"/>      
        </div>

        <div class="TimeS">
                <div class="slider3"></div>
        </div>

    </div>  


    <div class="drawSelect2"> 

        <div class="draw2">
                <img src="Bilder/02/02_01.03.16.jpg"/>
                <img src="Bilder/02/02_01.02.16.jpg"/>
                <img src="Bilder/02/02_01.01.16.jpg"/>  
        </div>

        <div class="TimeS">
                <div class="slider2"></div>
        </div>

    </div>


    <div class="drawSelect1"> 

        <div class="draw1">
                <img src="Bilder/01/01_01.03.16.jpg"/>
                <img src="Bilder/01/01_01.02.16.jpg"/>
                <img src="Bilder/01/01_01.01.16.jpg"/>

        </div>

        <div class="TimeS">
                <div class="slider slider1"></div>
        </div>

    </div>

JQUERY：

$(".draw1 img").hide();
$(".draw1 img:first").show();
$( ".slider1" ).slider({
        animate: "slow",
        ondragstart: true,
        isRTL: true,
        value:  0,

        min: 0,
        max: $(".draw1 img").length - 1,
        step: 1,

        slide: function( event, ui ) {
            $(".draw1 img").hide();
            $(".draw1 img:eq("+ui.value+")").show();
        }
    });


$(".draw2 img").hide();
$(".draw2 img:first").show();
$( ".slider2" ).slider({
        animate: true,
        ondragstart: true,
        isRTL: true,
        value:  0,

        min: 0,
        max: $(".draw2 img").length - 1,
        step: 1,

        slide: function( event, ui ) {
            $(".draw2 img").hide();
            $(".draw2 img:eq("+ui.value+")").show();
        }
    });

$(".draw3 img").hide();
$(".draw3 img:first").show();
$( ".slider3" ).slider({
        animate: true,
        ondragstart: true,
        isRTL: true,
        value:  0,

        min: 0,
        max: $(".draw3 img").length - 1,
        step: 1,

        slide: function( event, ui ) {
            $(".draw3 img").hide();
            $(".draw3 img:eq("+ui.value+")").show();
        },
        change: function(event, ui) {       
        }
    });

非常感谢你的帮助！

Answer 1

你可以创建一个带有两个参数的函数，draw div，然后是相应的滑块div。

draw(".draw1", ".slider1");
draw(".draw2", ".slider2");
draw(".draw3", ".slider3");

function draw(drawdiv, sliderdiv) {
    $(drawdiv + " img").hide();
    $(drawdiv + " img:first").show();
    $( sliderdiv ).slider({
        animate: true,
        ondragstart: true,
        isRTL: true,
        value:  0,

        min: 0,
        max: $(drawdiv + " img").length - 1,
        step: 1,

        slide: function( event, ui ) {
            $(drawdiv + " img").hide();
            $(drawdiv + " img:eq("+ui.value+")").show();
        },
        change: function(event, ui) {}
    });
}

这里写的例子：
http://codepen.io/EskoCruz/pen/ENBxVw/

如何为不同的div使用相同的滑块（将3个单独的函数组合到jquery中的一个函数）

1 个答案: