jquery - 带有 jquery ui 多个 slider 的表单...只为所有 slider 提交一个值

Question

我一直在通过 stackoverflow 和其他地方自学，学到了很多东西，但对此仍然很陌生。我正在设置一个包含 5 个 slider 的表单，其值随后将发布到 PHP 页面。一切工作正常...除了表单提交每个 slider 的最终 slider 的值。我想我需要使用 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

由于缺乏对表单中输入结构的更好理解，我将假设表单中唯一的隐藏字段与每个 slider 匹配，以便可以对它们进行索引。

有时，在 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);
        }
    });
});