如何通过输入类型更新jquery滑块分页（codrops）的值答案

【问题标题】：How to update value of jquery slider pagination(codrops) by input type如何通过输入类型更新jquery滑块分页（codrops）的值
【发布时间】：2014-04-18 14:50:43
【问题描述】：

我正在使用 Codrops 的 jQuery 滑块分页：http://tympanus.net/Development/SliderPagination/

我希望通过更改输入文本的值来更新滑块的值，反之亦然。

但是，当我在输入文本中键入一些值时，该值不会更新，而是出现在新的分页滑块上。

这是代码：

$(function () {
    $("#aduhh").change(function(){
        // alert($("#aduhh").val())
        $( "#slider" ).pagination( {
            Value : $("#aduhh").val(),
        });
    });  
    $( "#slider" ).pagination( {
        Value : 10,
        total : 100,
        step:1,  
        next:1,
        onChange : function( value ) { 
        $("#aduhh").val(value);
        }
    });
});

html:

<div id="slider" class="sp-slider-wrapper">
   <nav>
      <a href="#" class="sp-prev">Previous</a>
      <a href="#" class="sp-next">Next</a>
   </nav>
</div> 

  <input type="text" id="aduhh" />

这是http://jsfiddle.net/teman_bermain/c2peX/2

我该怎么做？谢谢。

对不起我的语法。

【问题讨论】：

标签： jquery jquery-ui pagination

【解决方案1】：

每次更改$("aduhhh") 的值时，您的代码都会添加新的分页滑块，因为您在回调中调用了.pagination。

$(function() {
    var initValue = 10;

    $("#aduhh").val(initValue);

    var mySlider = $("#slider").pagination({
        value : initValue,
        total : 100,
        step : 1,
        next : 1,
        onChange : function(value) {
          $("#aduhh").val(value);
        }
    });

    $("#aduhh").change(function() {
      var currentValue = $("#aduhh").val();

      mySlider.slider.value = currentValue;
      $("#slider span").text(currentValue);
    })
})

【讨论】：