滑塊值增加拾取以前的值

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功能，您可以用IDS one和two添加的輸入值，以獲得總和值

$(document).ready(function(){ 
 
    
 
    $('#slider1').slider({ 
 
     value: 1, 
 
     min: 1, 
 
     max: 5, 
 
     step: 1, 
 
     slide: function(event, ui){ 
 
      $("#one").val(ui.value); \t 
 
      $("#equals").val(add()); 
 
     } 
 
    }); 
 
    
 
    $('#slider2').slider({ 
 
     value: 1, 
 
     min: 1, 
 
     max: 5, 
 
     step: 1, 
 
     slide: function(event, ui){ 
 
      $("#two").val(ui.value); \t 
 
      $("#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">