3

我一直在通过 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" />

有什么建议么？我难住了！

4

1 回答 1

2

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

有时在循环中实现插件更容易，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);
        }
    });
});
于 2012-10-27T22:49:09.667 回答