一步增加和減少jQuery滑塊ui值

Question

我創建了一個滑塊，該滑塊顯示基於指定數組的值。 我想使用“加/減”按鈕一步一步地增加或減少該值，但該值似乎沒有變化。

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

帶有輸入字段和增加/減少按鈕的滑塊

代碼如下：

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

您的代碼中存在一些錯誤，例如click事件必須已准備好在文檔內部，否則您需要在事件偵聽器上使用該文檔。 您正在尋找的是：

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