0

我想通过 ajax 将数据从两个 ui-slider（将来更多）传递到我的 php-server。我有下面的代码。问题是我需要一些帮助来了解我如何保持用户不更改的滑块值。第一个滑块只向 genData.php 发送一个值。第二个滑块发送两个值“数据：{'slider2'：ui.value，'slider'：2}”，但我想将“2”更改为滑块1的值。有什么好主意吗？也可以随意更改结构。

<html>
     <head>
    <link rel="stylesheet" href="jqueryui1103/css/start/jquery-ui-1.10.3.custom.min.css" type="text/css" />
</head>
<body>
    <div id="foo1">Value of slider 1.</div>
    <div id="foo2">Value of slider 2.</div>
    <div id="foo3">value1*value2.</div>
    <div id="scrollbar"></div><br><br>
    <div id="scrollbar2"></div>
</body>
<script src="jqueryui1103/js/jquery-1.9.1.js"></script>
<script src="jqueryui1103/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript">
      $(document).ready(function() {
        $('#scrollbar').slider({
            value: 35,
            max: 36,
            range: "max",
            animate: true,
            slide: function(event, ui) {
                $('#scrollbar').slider('value', ui.value);
                $.ajax({
                    type: 'post',
                    url: 'genData.php',
                    datatype: 'json',
                    data: {'slider': ui.value},
                    success: function(fromphp) {
                        $('#foo1').html(fromphp.foo1);
                        $('#foo2').html(fromphp.foo2);
                        $('#foo3').html(fromphp.foo1);
                    }
                });
            }
        });

        $('#scrollbar2').slider({
            value: 3,
            max: 50,
            range: "max",
            animate: true,
            slide: function(event, ui) {
                $('#scrollbar2').slider('value', ui.value);
                /** var test = ($("#slider").slider("value")); */
                $.ajax({
                    type: 'post',
                    url: 'genData.php',
                    datatype: 'json',
                    data: {'slider2': ui.value, 'slider':2},
                    success: function(fromphp) {
                        $('#foo1').html(fromphp.foo1);
                        $('#foo2').html(fromphp.foo2);
                        $('#foo3').html(fromphp.foo1);
                    }
                });
            }
        });
    });
</script>
</html>
4

1 回答 1

0

您需要通过执行以下操作来获取值

  $("#scrollbar").slider( "option", "value" );

这是一个完整的工作解决方案 http://jsfiddle.net/yALMx/74/

我将它重构为一个 ajax 调用，它获取两个滑块的值

于 2013-11-11T14:54:57.570 回答