窗體與jquery ui多個滑塊......只有一個值被提交給所有

Question

我一直在通過stackoverflow和其他地方學習自己，並且學到了很多東西，但我對此仍然很陌生。我使用5個滑塊設置表單，然後將其值發佈到PHP頁面。一切工作正常...除了表單提交最終滑塊的值爲每個滑塊。我想我需要使用this屬性或each功能，但我不知道如何...

這裏是我的JS：

$(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" /> 

有什麼建議嗎？我很難過！

Answer 1

由於缺乏對錶單中輸入結構的更好理解，我將假設表單中唯一隱藏的字段與每個滑塊相匹配，以便它們可以被索引。

SOIMtimes在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); 
     } 
    }); 
});