如何使用不同的div相同的滑塊（jQuery中結合三個獨立的功能，一個功能）

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

您可以創建一個函數，它有兩個參數，繪製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/