Question

我使用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”的其他变量。对于这三个变量，滑块根本不起作用。手柄冻结在最小和最大位置。甚至控制台也没有给出任何错误。谁能告诉我我在做什么错？

Answer 1

我怀疑您需要正确设置worker.DoWork += (s, e) => do_work(s, e);，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(", ") + "]")
    }
  });
});

如果可以的话，我将调整您的JSON数据以包括滑块的更多详细信息。像这样：

<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>

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

1 个答案: