jquery와 여러 개의 슬라이더 ... 여러 개의 슬라이더 ... 하나만 값을 모두 제출하고있다

Question

나는 stackoverflow 및 다른 곳을 통해 자신을 교육하고 많은 것을 배웠지 만 여전히 아주 새로운 것입니다. 5 개의 슬라이더가있는 폼을 설정하고 있습니다.이 슬라이더의 값은 PHP 페이지에 게시됩니다. 모든 것이 잘 작동합니다 ... 폼이 모든 슬라이더의 최종 슬라이더 값을 제출한다는 점만 제외하면.

$(function(){ 

    var currentValue = $('#currentValue'); 

    $("#slider1,#slider2,#slider3,#slider4,#slider5").slider({ 
     range: "min", 
     value:37, 
     min:1, 
     max: 500, 
     slide: function(event, ui) { 
      currentValue.html(ui.value); 
      $("input:hidden").val(ui.value); 
     } 
    }); 

}); 

여기 내 HTML입니다 :

<input type=hidden name="slider1" id="slider1" class="slider-input" value="ui.value" /> 
<input type=hidden name="slider2" id="slider2" class="slider-input" value="ui.value" /> 
<input type=hidden name="slider3" id="slider3" class="slider-input" value="ui.value" /> 
<input type=hidden name="slider4" id="slider4" class="slider-input" value="ui.value" /> 
<input type=hidden name="slider5" id="slider5" class="slider-input" value="ui.value" /> 

다음

내 JS의 ... 나는 내가 this 특성 또는 each 기능을 사용할 필요가 있다고 생각,하지만 난 방법을 잘 모르겠어요

제안 사항이 있으십니까? 나는 곤두박질 친다!

Answer 1

양식의 입력 구조를 더 잘 이해하지 못하기 때문에 양식의 숨겨진 필드 만 각 슬라이더와 일치하므로 색인을 생성 할 수 있습니다.

실례로 each 루프 내에 플러그인을 구현하는 것이 더 쉽기 때문에 javscript 클로저 내에서 컬렉션의 각 요소에 간단하게 액세스 할 수 있습니다. jQuery UI를 사용하면 이벤트 내의 개별 요소에 액세스 할 수 있지만 모든 플러그인이 그렇게하지는 못하므로이 패턴은 때로는 매우 유용 할 수 있습니다.

var $sliders=$("#slider1,#slider2,#slider3,#slider4,#slider5") 

$sliders.each(function(){ 
    /* now have access to individual slider eleemnt*/ 
    var $slide=$(this); 
     /* match input index to index of this slider*/ 
    var $input= $("input:hidden").eq( $sliders.index($slide)); 
    /* initiate slider on this element*/ 
    $slide.slider({ 
     range: "min", 
     value:37, 
     min:1, 
     max: 500, 
     slide: function(event, ui) { 
      currentValue.html(ui.value); 
      /* assign value to correct input */ 
      $input.val(ui.value); 
     } 
    }); 
});