时间戳

首页 > 解决方案 > jQuery UI 滑块不适用于所有十进制值

javascript - jQuery UI 滑块不适用于所有十进制值

问题描述

我使用 jQuery UI 滑块为 json 中的一些变量制作了一个滑块。这是我的代码

$( "#slider_" + hashmap[this.value].name).slider({
                    range: true,
                    min: hashmap[this.value].prop[0],
                    max: hashmap[this.value].prop[1],
                    values: [ hashmap[this.value].prop[0], hashmap[this.value].prop[1]],
                    slide: function( event, ui ) { 
                      tooltipmin.text(ui.values[0]);
                      tooltipmax.text(ui.values[1]);
                    },
                    change: function(event,ui){
                      var range_value = $(this).slider('values')
                      var name = $(this).attr('id').substring($(this).attr('id').indexOf("_")+1)
                      var type = 'quant';
                      tooltipmin.text(ui.values[0]);
                      tooltipmax.text(ui.values[1]);
                      filterValues(name, range_value, type)
                    }

JSON

{
        "type": "quant",
        "name": "dmin",
        "prop": [
            0.0009815,
            1.58
        ]
    },
{
        "type": "quant",
        "name": "horizontalError",
        "prop": [
            0.1,
            10.6
        ]
    },
 {
        "type": "quant",
        "name": "magError",
        "prop": [
            0.0,
            1.34
        ]
    },
{
        "type": "quant",
        "name": "rms",
        "prop": [
            0.0,
            0.87
        ]
    },

该代码适用于大多数变量（水平错误）。但奇怪的是，它不适用于名称为“rms”、“dmin”和“magError”的其他变量。对于这三个变量，滑块根本不起作用。手柄在最小和最大位置冻结。甚至控制台也没有给出任何错误。谁能告诉我我做错了什么？

标签： javascriptjqueryjquery-ui

解决方案

我怀疑您需要正确设置min,max和step。在大多数情况下，最小值将是0，最大值和步长会有所变化。您可以考虑Math.ceil()像这样使用：

var hashmap = [{
    "type": "quant",
    "name": "dmin",
    "prop": [
      0.0009815,
      1.58
    ]
  },
  {
    "type": "quant",
    "name": "horizontalError",
    "prop": [
      0.1,
      10.6
    ]
  }, {
    "type": "quant",
    "name": "magError",
    "prop": [
      0.0,
      1.34
    ]
  }, {
    "type": "quant",
    "name": "rms",
    "prop": [
      0.0,
      0.87
    ]
  }
];

$(function() {
  $(".slide").slider({
    range: true,
    min: 0,
    max: 1,
    step: .00001,
    create: function(e, ui) {
      var slide = $(this);
      var type = "quant";
      var name = slide.attr("name");
      var props = hashmap[slide.data("id")].prop;
      slide.slider("option", {
        min: 0,
        max: Math.ceil(props[1]),
        values: props
      });
      slide.next("p").html("Values: <span>[" + props.join(", ") + "]</span>; Min: 0, Max: " + Math.ceil(props[1]));
    },
    slide: function(e, ui) {
      var slide = $(this);
      slide.next("p").find("span").html("[" + ui.values.join(", ") + "]")
    }
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider-1" class="slide" data-id="0" name="dmin"></div>
<p>Values:</p>

<div id="slider-2" class="slide" data-id="1" name="horizontalError"></div>
<p>Values:</p>

<div id="slider-3" class="slide" data-id="2" name="magError"></div>
<p>Values:</p>

<div id="slider-4" class="slide" data-id="3" name="rms"></div>
<p>Values:</p>

如果可以，我会调整您的 JSON 数据以包含滑块的更多详细信息。就像是：

{
  "type": "quant",
  "name": "dmin",
  "props": {
    "min": 0,
    "max": 5,
    "step": .00001
    "values": [
      0.00098,
      1.58
    ]
  }
};

推荐阅读