Question

我制作了2个滑块，它们将两个数字相加并将其输出到一个框中。

我的问题是总框总是会获取滑块的上一个值。

示例：两个滑块的值均为2.但总数为3. console.log证明值输出为先前值（滑动前）。

感谢您的帮助，谢谢。

这是一段代码片段，用于演示：

$(document).ready(function() {

  $('#slider1').slider({
    value: 1,
    min: 1,
    max: 5,
    step: 1,
    slide: function(event, ui) {
      $("#one").val(ui.value);
      $("#equals").val(add());
    }
  });

  $('#slider2').slider({
    value: 1,
    min: 1,
    max: 5,
    step: 1,
    slide: function(event, ui) {
      $("#two").val(ui.value);
      $("#equals").val(add());
    }
  });

  function add() {
    a = $('#slider1').slider('value');
    b = $('#slider2').slider('value');
    total = a + b;
    return total;
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<div id="slider1"></div>
<div id="slider2"></div>
<input type="text" id="one" name="one">
<input type="text" id="two" name="two">
<input type="text" id="equals" name="equals">

Answer 1

在add功能中，您可以使用ID one和two添加输入值以获取总和值

$(document).ready(function(){
  
    $('#slider1').slider({
        value: 1,
        min: 1,
        max: 5,
        step: 1,
        slide: function( event, ui ){
            $("#one").val( ui.value );	
            $("#equals").val( add() );
        }
    });
  
    $('#slider2').slider({
        value: 1,
        min: 1,
        max: 5,
        step: 1,
        slide: function( event, ui ){
            $("#two").val( ui.value );	
            $("#equals").val( add() );
        }
    });
  
    function add(){
        a = $('#one').val();
        b = $('#two').val();
        if(a) a = parseInt(a);
        if(b) b = parseInt(b);
        total = a + b;
        return total;
    }  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<div id="slider1"></div>
<div id="slider2"></div>
<input type="text" id="one" name="one">
<input type="text" id="two" name="two">
<input type="text" id="equals" name="equals">

滑块值添加会获取之前的值

1 个答案: