滑块值增加拾取以前的值

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">

滑块值增加拾取以前的值

Slider value addition picks up previous value

html

javascript

jquery-ui

slider

calculator