Question

我有这个代码，它使用JQuery UI创建一个滑块。当滑块停止时（当您停止移动滑块时）调用一个函数，并创建一个隐藏的表单字段，其中包含滑块中的值（以便在提交表单后可以对其进行POST）。

除了一个小错误之外，这完全有效：

如果用户未移动滑块，则永远不会触发stop:，因此永远不会创建隐藏的表单字段。

解决此问题的最佳方法是什么？

 $(function() {
    $( "#slider8" ).slider({
     orientation: "horizontal",
     range: "min",
     min: 0,
     max: 100,
     value: 50,
     stop: function(event, ui) {
        var $s1 = $('<input/>', {type: 'hidden',id:'slider8',name:'slider8', value: ui.value});
        $s1.appendTo('.form-horizontal');
     }
  });
 });

Answer 1

编辑：

我最初的建议是将jQuery UI滑块附加到范围输入类型，但jQuery UI不支持它 - 它只附加到div而不是输入元素。我的错误。

这是一个完整的jsFiddle示例，说明了您希望实现的目标。您需要在create事件中创建隐藏元素，并在change事件中更新它，如下所示：

HTML：

<div id="slider8ui"></div>

jQuery的：

 $(function() {
    $( "#slider8ui" ).slider({
     orientation: "horizontal",
     range: "min",
     min: 0,
     max: 100,
     value: 50,
     create: function( event, ui ) {
        $('<input/>', {type: 'text',id:'slider8',name:'slider8', value: 50}).appendTo('#slider8ui');
     },
     change: function(event, ui) {
        $("#slider8").val(ui.value);
     }
  });
 });

这是完整的jsFiddle：

http://jsfiddle.net/TdpX9/

JQuery Slider - 停止功能 - 如果用户没有“停止”怎么办？

1 个答案: