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

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

因此，在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);
        }
    });
});

与jquery ui形成多个滑块...只为所有人提交了一个值

1 个答案: