다른 div에 동일한 슬라이더를 사용하는 방법 (jquery에서 3 개의 개별 기능을 하나의 기능에 결합)

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/