jquery 的滑动块，怎么能根据json来滑动显示呢显示

cider7911 2015-10-31 08:10:53





jquery 的滑动块，怎么能根据json来滑动显示呢显示



<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery UI 滑块（Slider） - 带有固定最大值的范围</title>

<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">

<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<link rel="stylesheet" href="jqueryui/style.css">

<script>

  $(function() {

    $( "#slider-range-max" ).slider({

      range: "max",

      min: 1,

      max: 10,

      value: 2,

      slide: function( event, ui ) {

        $( "#amount" ).val( ui.value );

      }

    });

    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );

  });

  </script>

</head>

<body>

<p>

<label for="amount">最小的房间数量：</label>

<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">

</p>

<div id="slider-range-max"></div>

</body>

</html>



比如我想滑动模块显示 year 和 sumacchigh



{"GetfiveList":[{"accinyear":"27.35","sumacchigh":"28.61","sumacclow":"29.04","sumaccmid":"28.04","year":16},{"accinyear":"34.19","sumacchigh":"67.13","sumacclow":"63.81","sumaccmid":"65.68","year":17},{"accinyear":"34.19","sumacchigh":"107.57","sumacclow":"100.47","sumaccmid":"104.46","year":18},{"accinyear":"34.19","sumacchigh":"150.50","sumacclow":"138.07","sumaccmid":"145.02","year":19},{"accinyear":"34.19","sumacchigh":"196.08","sumacclow":"176.61","sumaccmid":"187.44","year":20},{"accinyear":"34.19","sumacchigh":"244.47","sumacclow":"216.13","sumaccmid":"231.81","year":21},{"accinyear":"34.19","sumacchigh":"295.85","sumacclow":"256.65","sumaccmid":"278.22","year":22},{"accinyear":"34.19","sumacchigh":"350.39","sumacclow":"298.20","sumaccmid":"326.76","year":23},{"accinyear":"34.19","sumacchigh":"408.30","sumacclow":"340.79","sumaccmid":"377.53","year":24},{"accinyear":"34.19","sumacchigh":"469.78","sumacclow":"384.46","sumaccmid":"430.63","year":25},{"accinyear":"34.19","sumacchigh":"535.05","sumacclow":"429.24","sumaccmid":"486.18","year":26},{"accinyear":"34.19","sumacchigh":"604.35","sumacclow":"475.15","sumaccmid":"544.27","year":27},{"accinyear":"34.19","sumacchigh":"677.92","sumacclow":"522.22","sumaccmid":"605.04","year":28},{"accinyear":"34.19","sumacchigh":"756.04","sumacclow":"570.48","sumaccmid":"668.59","year":29},{"accinyear":"34.19","sumacchigh":"838.96","sumacclow":"619.96","sumaccmid":"735.07","year":30},{"accinyear":"34.19","sumacchigh":"927.01","sumacclow":"670.69","sumaccmid":"804.59","year":31},{"accinyear":"34.19","sumacchigh":"1020.48","sumacclow":"722.70","sumaccmid":"877.32","year":32},{"accinyear":"34.19","sumacchigh":"1119.72","sumacclow":"776.03","sumaccmid":"953.38","year":33},{"accinyear":"34.19","sumacchigh":"1225.08","sumacclow":"830.71","sumaccmid":"1032.94","year":34},{"accinyear":"34.19","sumacchigh":"1336.94","sumacclow":"886.77","sumaccmid":"1116.15","year":35},{"accinyear":"34.19","sumacchigh":"1455.69","sumacclow":"944.25","sumaccmid":"1203.19","year":36},{"accinyear":"34.19","sumacchigh":"1581.78","sumacclow":"1003.18","sumaccmid":"1294.22","year":37},{"accinyear":"34.19","sumacchigh":"1715.63","sumacclow":"1063.61","sumaccmid":"1389.44","year":38},{"accinyear":"34.19","sumacchigh":"1857.75","sumacclow":"1125.56","sumaccmid":"1489.03","year":39},{"accinyear":"34.19","sumacchigh":"2008.63","sumacclow":"1189.07","sumaccmid":"1593.19","year":40},{"accinyear":"34.19","sumacchigh":"2168.81","sumacclow":"1254.20","sumaccmid":"1702.14","year":41},{"accinyear":"34.19","sumacchigh":"2338.88","sumacclow":"1320.97","sumaccmid":"1816.10","year":42},{"accinyear":"34.19","sumacchigh":"2519.43","sumacclow":"1389.43","sumaccmid":"1935.29","year":43},{"accinyear":"34.19","sumacchigh":"2711.12","sumacclow":"1459.62","sumaccmid":"2059.96","year":44},{"accinyear":"34.19","sumacchigh":"2914.64","sumacclow":"1531.58","sumaccmid":"2190.35","year":45},{"accinyear":"34.19","sumacchigh":"3130.71","sumacclow":"1605.37","sumaccmid":"2326.73","year":46},{"accinyear":"34.19","sumacchigh":"3360.10","sumacclow":"1681.02","sumaccmid":"2469.38","year":47},{"accinyear":"34.19","sumacchigh":"3603.64","sumacclow":"1758.58","sumaccmid":"2618.59","year":48},{"accinyear":"34.19","sumacchigh":"3862.20","sumacclow":"1838.11","sumaccmid":"2774.64","year":49},{"accinyear":"34.19","sumacchigh":"4136.71","sumacclow":"1919.64","sumaccmid":"2937.87","year":50},{"accinyear":"34.19","sumacchigh":"4428.15","sumacclow":"2003.24","sumaccmid":"3108.60","year":51},{"accinyear":"34.19","sumacchigh":"4737.57","sumacclow":"2088.96","sumaccmid":"3287.16","year":52},{"accinyear":"34.19","sumacchigh":"5066.07","sumacclow":"2176.84","sumaccmid":"3473.93","year":53},{"accinyear":"34.19","sumacchigh":"5414.83","sumacclow":"2266.94","sumaccmid":"3669.29","year":54},{"accinyear":"34.19","sumacchigh":"5785.11","sumacclow":"2359.32","sumaccmid":"3873.61","year":55},{"accinyear":"34.19","sumacchigh":"6178.22","sumacclow":"2454.04","sumaccmid":"4087.33","year":56},{"accinyear":"34.19","sumacchigh":"6595.57","sumacclow":"2551.15","sumaccmid":"4310.86","year":57},{"accinyear":"34.19","sumacchigh":"7038.67","sumacclow":"2650.72","sumaccmid":"4544.66","year":58},{"accinyear":"34.19","sumacchigh":"7509.10","sumacclow":"2752.80","sumaccmid":"4789.20","year":59},{"accinyear":"34.19","sumacchigh":"8008.54","sumacclow":"2857.47","sumaccmid":"5044.97","year":60},{"accinyear":"34.19","sumacchigh":"8538.79","sumacclow":"2964.79","sumaccmid":"5312.50","year":61},{"accinyear":"34.19","sumacchigh":"9101.74","sumacclow":"3074.82","sumaccmid":"5592.31","year":62},{"accinyear":"34.19","sumacchigh":"9699.41","sumacclow":"3187.63","sumaccmid":"5884.98","year":63},{"accinyear":"34.19","sumacchigh":"10333.95","sumacclow":"3303.29","sumaccmid":"6191.10","year":64},{"accinyear":"34.19","sumacchigh":"11007.62","sumacclow":"3421.88","sumaccmid":"6511.27","year":65},{"accinyear":"34.19","sumacchigh":"11722.85","sumacclow":"3543.47","sumaccmid":"6846.16","year":66},{"accinyear":"34.19","sumacchigh":"12482.18","sumacclow":"3668.13","sumaccmid":"7196.43","year":67},{"accinyear":"34.19","sumacchigh":"13288.36","sumacclow":"3795.94","sumaccmid":"7562.79","year":68},{"accinyear":"34.19","sumacchigh":"14144.25","sumacclow":"3926.99","sumaccmid":"7945.99","year":69},{"accinyear":"1172.94","sumacchigh":"18510.20","sumacclow":"6563.73","sumaccmid":"11202.83","year":70},{"accinyear":"33.30","sumacchigh":"18402.67","sumacclow":"5565.85","sumaccmid":"10505.57","year":71},{"accinyear":"33.30","sumacchigh":"19573.06","sumacclow":"5740.75","sumaccmid":"11023.02","year":72},{"accinyear":"33.30","sumacchigh":"20815.64","sumacclow":"5920.06","sumaccmid":"11564.25","year":73},{"accinyear":"33.30","sumacchigh":"22134.85","sumacclow":"6103.91","sumaccmid":"12130.34","year":74},{"accinyear":"33.30","sumacchigh":"23535.44","sumacclow":"6292.41","sumaccmid":"12722.43","year":75},{"accinyear":"33.30","sumacchigh":"25022.40","sumacclow":"6485.68","sumaccmid":"13341.73","year":76},{"accinyear":"33.30","sumacchigh":"26601.08","sumacclow":"6683.84","sumaccmid":"13989.47","year":77},{"accinyear":"33.30","sumacchigh":"28277.13","sumacclow":"6887.00","sumaccmid":"14666.98","year":78},{"accinyear":"33.30","sumacchigh":"30056.56","sumacclow":"7095.31","sumaccmid":"15375.61","year":79},{"accinyear":"222.00","sumacchigh":"32358.77","sumacclow":"7700.72","sumaccmid":"16520.59","year":80}],"sumprem533":"74.37","sumprem534":"1139.64","type":"保费","mn_amnt_533":"33.30","mn_amnt_534":"34.19","bd_amnt534":"227.93","bd_amnt533":"14.87","f_amnt":"27.35","sumamnt":"242.80","age":"16","ndur":"70","faceamnt":"222.00"}

...全文

81 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

cider7911 2015-10-31

打赏
举报

引用 1 楼 showbo 的回复:

只能设置一个区间吧。。你有那么多组year 和 sumacchigh，随便设置一组就好了

     $(function () {
            var data = { "GetfiveList": [{ "accinyear": "27.35", "sumacchigh": "28.61", "sumacclow": "29.04", "sumaccmid": "28.04", "year": 16 }/*..........*/] };
            $("#slider-range-max").slider({
                range: "max",
                min: data.GetfiveList[0].year,
                max: data.GetfiveList[0].sumacchigh,
                value: 2,
                slide: function (event, ui) {
                    $("#amount").val(ui.value);
                }
            });
            $("#amount").val($("#slider-range-max").slider("value"));
        });

这块能做循环吗，year是年龄，我是想用year 来设置min和max

斯洛文尼亚旅游 2015-10-31

打赏
举报

只能设置一个区间吧。。你有那么多组year 和 sumacchigh，随便设置一组就好了

     $(function () {
            var data = { "GetfiveList": [{ "accinyear": "27.35", "sumacchigh": "28.61", "sumacclow": "29.04", "sumaccmid": "28.04", "year": 16 }/*..........*/] };
            $("#slider-range-max").slider({
                range: "max",
                min: data.GetfiveList[0].year,
                max: data.GetfiveList[0].sumacchigh,
                value: 2,
                slide: function (event, ui) {
                    $("#amount").val(ui.value);
                }
            });
            $("#amount").val($("#slider-range-max").slider("value"));
        });

斯洛文尼亚旅游 2015-10-31

打赏
举报

引用 2 楼 Cobragx 的回复:

[quote=引用 1 楼 showbo 的回复:] 只能设置一个区间吧。。你有那么多组year 和 sumacchigh，随便设置一组就好了

     $(function () {
            var data = { "GetfiveList": [{ "accinyear": "27.35", "sumacchigh": "28.61", "sumacclow": "29.04", "sumaccmid": "28.04", "year": 16 }/*..........*/] };
            $("#slider-range-max").slider({
                range: "max",
                min: data.GetfiveList[0].year,
                max: data.GetfiveList[0].sumacchigh,
                value: 2,
                slide: function (event, ui) {
                    $("#amount").val(ui.value);
                }
            });
            $("#amount").val($("#slider-range-max").slider("value"));
        });

这块能做循环吗，year是年龄，我是想用year 来设置min和max [/quote] 你只有一个控件啊，一个控件只能设置一个区域，你又很多个数组项