Question

＆＃13;

var pokaz = 12;

var sliderValue = [4, 6, 12, 24];

$('#pokaz').slider({min:4, max:24, value: 12,
				slide: function( event, ui ) {
        if( sliderValue.indexOf(ui.value)===-1 ) return false;
               $( "#pokaz" ).val( ui.value)
        pokaz=ui.value; calc(pokaz)}});

function calc(pokaz){
   $('#ipokaz').html(pokaz);
}

＆＃13;

#pokaz {
  width: 12.5rem;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>



<div id="pokaz"></div><br>
<span id="ipokaz"></span>

＆＃13;

所以问题是：

https://jsfiddle.net/5xayhvb8/7/

值12和24之间的距离对于缠绕是非常大的，我如何删除中间＆＃34;隐藏＆＃34;数字，使绕组之间的距离相同短？

Answer 1

slider()正在完成他的工作。它的步长与其步骤的价值相对应。但当然有一种解决方法。只需制作相等大小的步长值，然后在slide(event, ui)函数中设置实际值。就像那样。

var sliderValue = [4, 6, 12, 24];

$('#ipokaz').text (sliderValue[0]);

$('#pokaz').slider ({
  min: 0, 
  max: sliderValue.length - 1, 
  slide: function (event, ui) {
    calc (sliderValue[ui.value]);
  }
});

function calc (pokaz) {
   $('#ipokaz').text (pokaz);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div id="pokaz"></div>
<br>
<span id="ipokaz"></span>

Answer 2

一个解决方案可能就是获取值数组的特定索引，如下所示：

$('#pokaz').slider({
  min: 0,
  max: 3,
  slide: function(event, ui) {
    $("#pokaz").val(sliderValue[ui.value])
    pokaz = sliderValue[ui.value];
    calc(pokaz)
  }
});

如何减少jquery幻灯片的距离？

2 个答案: