Question

我需要做一个滑块范围，显示每个处理程序下的数量，我跟着一个使用jquery 1.6.2和jquery-ui 1.8.5的工作小提琴，但在我的项目中我使用jquery 2.1.4和jquery-ui 1.11.4。它几乎可以工作，但有一些问题：

滑块开头有一个固定的0。
仅当我移动其中一个按钮时，才会显示数量出现在我正在移动的按钮下面。当我移动另一个按钮时数量从第一个按钮消失并显示在实际中按钮。
控制台显示“未捕获的TypeError：无法读取属性 'nodeType'未定义“

这是我的实际范围滑块，其中包含注释问题：https://jsfiddle.net/zykw73tj/1/

这是最初的小提琴：http://jsfiddle.net/william/RSkpH/1/

我从前一个问题获得了工作小提琴：jQuery UI Slider: move the value along (with) the handle

如果我改变JQuery和原始小提琴的JQuery-UI，我会看到与我相同的问题。

由于

    -- HTML --
<div id="slider"></div>
<div id="min"></div>
<div id="max"></div>


-- JQUERY --
$( document ).ready(function() {

  $("#slider").slider({
      range: true,
      min: 0,
      max: 1000,
      step: 10,
      values: [0, 1000],
      slide: function(event, ui) {
          var delay = function() {
              var handleIndex = $(ui.handle).data('index.uiSliderHandle');
              var label = handleIndex == 0 ? '#min' : '#max';
              $(label).html(ui.value + '€').position({
                  my: 'center top',
                  at: 'center bottom',
                  of: ui.handle,
                  offset: "0, 10"
              });
          };

          // wait for the ui.handle to set its position
          setTimeout(delay, 5);
      }
  });

  $('#min').html($('#slider').slider('values', 0) + '€').position({
      my: 'center top',
      at: 'center bottom',
      of: $('#slider a:eq(0)'),
      offset: "0, 10"
  });

  $('#max').html($('#slider').slider('values', 1) + '€').position({
      my: 'center top',
      at: 'center bottom',
      of: $('#slider a:eq(1)'),
      offset: "0, 10"
  });

});

Answer 1

有几件事你需要纠正。

var handleIndex = $(ui.handle).data('index.uiSliderHandle');

此处handleIndex为undefined。尝试index()而不是使用数据比如$(ui.handle).index()
Uncaught TypeError: Cannot read property 'nodeType' of undefined 上述错误是由以下两行引起的，因为不存在锚标记。而是尝试span，因为句柄是使用span元素显示的。

of: $(#slider a:eq(0)),

of: $('#slider a:eq(1)'),

而是尝试

of: $(#slider span:eq(0)),

of: $('#slider span:eq(1)'),

查看工作演示https://jsfiddle.net/vzfhjg16/

希望这会有所帮助......

Answer 2

我认为你有Jquery Core＆amp; amp; UI版本。

你可以试试这个

  $(function() {

    $("#slider").slider({
        range: true,
        min: 0,
        max: 500,
        step: 10,
        values: [0, 500],
        slide: function(event, ui) {
            var delay = function() {
                var handleIndex = $(ui.handle).data('index.uiSliderHandle');
                
                var label = handleIndex == 0 ? '#min' : '#max';
                
                $(label).html('$' + ui.value).position({
                    my: 'center top',
                    at: 'center bottom',
                    of: ui.handle,
                    offset: "0, 10"
                });
            };
            
            // wait for the ui.handle to set its position
            setTimeout(delay, 5);
        }
    });

    $('#min').html('$' + $('#slider').slider('values', 0)).position({    
        my: 'center top',
        at: 'center bottom',
        of: $('#slider a:eq(0)'),
        offset: "0, 10"
    });
    
    $('#max').html('$' + $('#slider').slider('values', 1)).position({

        my: 'center top',
        at: 'center bottom',
        of: $('#slider a:eq(1)'),
        offset: "0, 10"
    });


  });

  #slider 
  {
      width: 80%;
      margin-left: 1em;
  }

  #min, #max {
      width: 50px;
      text-align: center;
  }

<script src="//code.jquery.com/jquery-1.6.2.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div id="slider"></div>
<div id="min"></div>
<div id="max"></div>

JQuery-ui范围滑块，处理程序下的数字无法正常工作

2 个答案: