当我有多个 jQuery UI 滑块时，为什么会出现 TypeError？

Question

我在一个页面上有多个滑块，分配了 ID 和自定义数据，但其他方面相同。出于某种奇怪的原因，只有第一个有效，第二个总是与Uncaught TypeError: Cannot read property '0' of null 出错。我真的不确定我要去哪里错了，我是否遗漏了一些明显的东西？由于 TypeError 如此通用，这似乎是一个难以研究的问题。

第一个/工作滑块：

var valMap = ["Foo", "Bar", "Fizz", "Buzz"];

var slider = $('#slider_1');
var sliderVal = $('#slider_val_1');

slider.slider({
    animate: "fast",
    min: 0,
    max: valMap.length - 1,
    value: 0,
    slide: function (event, ui) {
        // Some logic
    },
    change: myChangeFunction
});

第二个/损坏的滑块：

var valMap = ["This", "That", "Those", "Them"];

var slider = $('#slider_2');
var sliderVal = $('#slider_val_2');

slider.slider({
    animate: "fast",
    min: 0,
    max: valMap.length - 1,
    value: 0,
    slide: function (event, ui) {
        // Some logic
    },
    change: myChangeFunction
});

jQuery(function($) {
  var valMap = ["Any", "40", "50", "55", "60", "65", "70", "80", "85", "90", "100", "110", "120", "140", "150", "160", "190"];
  var ajaxValMap = ["", "901000072", "901000052", "901000069", "901000055", "901000073", "901000084", "901000081", "901000086", "901000058", "901000077", "901000083", "901000082", "901000050", "901000067", "901000066", "901000064"];

  jQuery.ui.slider.prototype.widgetEventPrefix = 'slider';

  var slider = $('#slider_1');
  var sliderVal = $('#slider_val_1');

  slider.slider({
    animate: "fast",
    //range: true,
    min: 0,
    max: valMap.length - 1,
    value: 0,
    slide: function(event, ui) {
      sliderVal
        .text(valMap[ui.value] + " <");

      if (ui.value == 0) {
        slider.attr('value', null);
        sliderVal
          .text(valMap[ui.value]);
      } else {
        var ajaxIds = ajaxValMap.slice(ui.value, valMap.length);
        slider.attr('value', ajaxIds.join(','));
      }
    },
    //change: comboValueChange
  });

  var sliderValues = slider.slider("option", "values");

  sliderVal
    .val(valMap[sliderValues[0]] + " - " + valMap[sliderValues[1]]);
});

jQuery(function($) {
  var valMap = ["Any", "1", "2", "3", "4", "5", "6", "7", "9", "15", "23", "39", "45", "55", "60", "91"];
  var ajaxValMap = ["", "804000066", "804000083", "804000085", "804000063", "804000086", "804000067", "804000082", "804000058", "804000077", "804000084", "804000073", "804000072", "804000070", "804000069", "804000078"];

  jQuery.ui.slider.prototype.widgetEventPrefix = 'slider';

  var slider = $('#slider_4');
  var sliderVal = $('#slider_val_4');

  slider.slider({
    animate: "fast",
    //range: true,
    min: 0,
    max: valMap.length - 1,
    value: 0,
    slide: function(event, ui) {
      sliderVal
        .text(valMap[ui.value] + " <");

      if (ui.value == 0) {
        slider.attr('value', null);
        sliderVal
          .text(valMap[ui.value]);
      } else {
        var ajaxIds = ajaxValMap.slice(ui.value, valMap.length);
        slider.attr('value', ajaxIds.join(','));
      }
    },
    //change: comboValueChange
  });

  var sliderValues = slider.slider("option", "values");

  sliderVal
    .val(valMap[sliderValues[0]] + " - " + valMap[sliderValues[1]]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id='slider_1'></div>
<div id='slider_val_1'></div>
<div id='slider_4'></div>
<div id='slider_val_4'></div>

Answer 1

根据 jQuery UI 文档here，“值”是一种方法，而不是选项。你需要使用：

slider.slider("values");

而不是

slider.slider("option", "values");

更新的 JSFiddle：https://jsfiddle.net/jimbo2150/opmxbb87/2/