一步增加和减少jQuery滑块ui值

Question

我创建了一个根据指定数组显示值的滑块。我想使用“加号/减号”按钮将值增加或减少一步，这似乎有效，但值没有更新。

https://jsfiddle.net/martynava/jrx8rz79/6/

slider with input field and increase/decrease buttons

代码如下：

$(function() {
var sizes = [ "10", "20", "30", "40", "50", "60", "70", "80", "90", "100", "200", "300", "400", "500", "1000" ];
$("#slider-range-max").slider({
  range: "max",
  min: 0,
  max: sizes.length - 1,
  step: 1,
  slide: function(event, ui) {
    $("#cap").val(sizes[ui.value]);
  }
});
$( "#cap" ).val( $( "#slider-range-max" ).slider( "value" ) + ' TB' );
});


$("#plus1").click(function() {
    var value = $("#slider-range-max").slider("value")
        , step = $("#slider-range-max").slider("option", "step");

    $("#slider-range-max").slider("value", value + step);
});

$("#minus1").click(function () {
    var value = $("#slider-range-max").slider("value")
        , step = $("#slider-range-max").slider("option", "step");

    $("#slider-range-max").slider("value", value - step);        
});

有谁知道使它工作的最佳方法是什么。提前谢谢你

Answer 1

您的代码中有一些错误，例如单击事件必须在文档中准备好，否则您需要在事件侦听器上使用文档。您正在寻找的是：

$(function () {
  var sizes = ["10", "20", "30", "40", "50", "60", "70", "80", "90", "100", "200", "300", "400", "500", "1000"];
  $("#slider-range-max").slider({
    range: "max",
    min: 0,
    max: sizes.length - 1,
    step: 1,
    create: function(event, ui) {
      $("#cap").val(sizes[0] + ' TB');
    },
    change: function (event, ui) {
      $("#cap").val(sizes[ui.value] + ' TB');
    }
  });

  $("#plus1").click(function () {
    var value = $("#slider-range-max").slider("value");
    var step = $("#slider-range-max").slider("option", "step");

    $("#slider-range-max").slider("value", value + step);
  });

  $("#minus1").click(function () {
    var value = $("#slider-range-max").slider("value")
    var step = $("#slider-range-max").slider("option", "step");

    $("#slider-range-max").slider("value", value - step);
  });
});

.slider {
  position: relative;
  margin-top: 20px;
  margin-bottom: 15px;
  width: 90%;
  background: #2A3137;
  /* -moz-box-shadow: inset 0 0 10px #999;
  -webkit-box-shadow: inset 0 0 10px #999;
  box-shadow: inset 0 0 10px #999;*/
  height: 15px;
  border-radius: 10px;
  border: 1px solid #DDDDDD;
  margin-left: 15px;
}

.slider .ui-slider-handle {
  position: absolute;
  background: #10A447;
  border-radius: 5px;
  width: 20px;
  height: 50px;
  top: -16px;
  left: 50px;
  border-style: none;
  box-shadow: none;

}

input[type=text] {
  border: 1px solid #10A447;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: -15px;
  text-align: center;
  background-color: #ffffff;
  width: 120px;
  color: #2A3137;
  font-size: 18px;
  font-weight: bold;
  margin-top: 5px;
  margin-left: 5px;
}

.minus, .plus {
  display: inline-block;
  float: left;
  border: 1px solid #aaa;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: -15px;
  text-align: center;
  background-color: #e3e3e3;
  color: #333;
  font-size: 18px;
  font-weight: bold;
  margin-left: 5px;
  cursor: pointer;
  width: 10px;
  margin-top: 5px;
}

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>


<div id="quote-input" class="slider-input">
    <div id="minus1" class="minus"><span>-</span></div>
    <div id="plus1" class="plus">+</div>
    <input type="text" id="cap" class="slider-value">


    <div id="slider-range-max" class="slider">
        <span class="ui-slider-handle"></span>
    </div>
</div>