2016-01-17 35 views
0

我不知道爲什麼這段代碼工作得如此糟糕。看看:JSFiddleJquery - 輸入數據傳輸不精確

雖然滑塊在第一個輸入中正確顯示值,但簡單的數學任務(乘法)會計算錯誤的數字。這是爲什麼?

jQuery(document).ready(function($){ 

    $('.variations').after('<form class="sliding_values" id="sliding_values">'); 
    $('.sliding_values').after('<p><label for="slide_portal">% 1</label><input id="slide_portal" type="range" min="1" max="100" step="1" /></p>'); 
    $('#slide_portal').after('<p><label for="slide_autor">% 2</label><input id="slide_autor" type="range" min="1" max="100" step="1" /></p>'); 
    $('#slide_autor').after('<p><label for="slide_fundacja">% 3</label><input id="slide_fundacja" type="range" min="1" max="100" step="1" /></p>'); 
    $('#slide_fundacja').after('</form>'); 


    $(function(){ 
     var currentValue1 = $('input[name="_dla_portalu"]'); 
     $('#slide_portal').change(function(){ 
      currentValue1.val(this.value); 
     }); 
     $('#slide_portal').change(); 

     var currentValue2 = $('input[name="_dla_autora"]'); 
     $('#slide_autor').change(function(){ 
      currentValue2.val(this.value); 
     }); 
     $('#slide_autor').change(); 

     var currentValue3 = $('input[name="_dla_fundacji"]'); 
     $('#slide_fundacja').change(function(){ 
      currentValue3.val(this.value); 
     }); 
     $('#slide_fundacja').change();    
    }); 


    $('input').change(function(){ 
     var amount1a=$('input[name="_dla_autora"]').val(); 
     var amount2=$('#pa_kategoria-cenowa').val(); 
     var amount1b=$('input[name="_dla_fundacji"]').val(); 
     var amount1c=$('input[name="_dla_portalu"]').val(); 
     var fractal=0.01; 
     var Total1=(amount1a*amount2*fractal); 
     $('input[name="pln_dla_autora"]').val(Total1); 
     var Total2=(amount1b*amount2*fractal); 
     $('input[name="pln_dla_fundacji"]').val(Total2); 
     var Total3=(amount1c*amount2*fractal); 
     $('input[name="pln_dla_portalu"]').val(Total3);  
    }); 

}); 
+1

什麼是理想的行爲? –

+0

只是看看jsfiddle。它只是計算錯誤 - 例如從下拉值中選擇10.當你將使用第一個滑塊實現值100時,在PLN 1字段中應該出現:10,並且當前輸出是荒謬的。當你將滑塊向左移動時,最小值不是1(如代碼中所示),但有時會顯示最大值:| –

+0

備註:[使用英文作爲標識符](http://programmers.stackexchange.com/questions/1483/do-people-in-non-english-speaking-countries-code-in-english)(側面注: cześćrodaku)。 –

回答

1

你的錯誤是由滑塊您輸入的change事件偵聽器後執行change事件偵聽器造成的。把輸入的事件偵聽器的$(function() {})裏面,它應該工作:

jQuery(document).ready(function($){ 
 
    $('.variations').after('<form class="sliding_values" id="sliding_values">'); 
 
    $('.sliding_values').after('<p><label for="slide_portal">% 1</label><input id="slide_portal" type="range" min="1" max="100" step="1" /></p>'); 
 
    $('#slide_portal').after('<p><label for="slide_autor">% 2</label><input id="slide_autor" type="range" min="1" max="100" step="1" /></p>'); 
 
    $('#slide_autor').after('<p><label for="slide_fundacja">% 3</label><input id="slide_fundacja" type="range" min="1" max="100" step="1" /></p>'); 
 
    $('#slide_fundacja').after('</form>'); 
 
\t 
 

 
    $(function(){ 
 
    var currentValue1 = $('input[name="_dla_portalu"]'); 
 
    $('#slide_portal').change(function(){ 
 
     currentValue1.val(this.value); 
 
    }); 
 
    $('#slide_portal').change(); 
 
\t \t 
 
    var currentValue2 = $('input[name="_dla_autora"]'); 
 
    $('#slide_autor').change(function(){ 
 
     currentValue2.val(this.value); 
 
    }); 
 
    $('#slide_autor').change(); \t 
 

 
    var currentValue3 = $('input[name="_dla_fundacji"]'); 
 
    $('#slide_fundacja').change(function(){ 
 
     currentValue3.val(this.value); 
 
    }); 
 
    $('#slide_fundacja').change(); \t \t \t 
 
    $('input').change(function(){ 
 
     var amount1a=$('input[name="_dla_autora"]').val(); 
 
     var amount2=$('#pa_kategoria-cenowa').val(); 
 
     var amount1b=$('input[name="_dla_fundacji"]').val(); 
 
     var amount1c=$('input[name="_dla_portalu"]').val(); 
 
     var fractal=0.01; 
 
     var Total1=(amount1a*amount2*fractal); 
 
     $('input[name="pln_dla_autora"]').val(Total1); 
 
     var Total2=(amount1b*amount2*fractal); 
 
     $('input[name="pln_dla_fundacji"]').val(Total2); 
 
     var Total3=(amount1c*amount2*fractal); 
 
     $('input[name="pln_dla_portalu"]').val(Total3); \t \t 
 
    }); \t 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="variations"> 
 
\t \t \t     <div class="variations_lines"> 
 

 
        <div class="value"> 
 
<select id="pa_kategoria-cenowa" name="attribute_pa_kategoria-cenowa"> 
 
<option value="">---</option> 
 
<option value="10" class="attached enabled">10.00</option> 
 
<option value="15" class="attached enabled">15.00</option> 
 
<option value="5" class="attached enabled">5.00</option> 
 
</select>       
 
    </div><!-- .value --> 
 
</div><!-- .variations_lines --> 
 
</div> 
 
       
 

 
<div class="wccpf-fields-group-1"> \t 
 
\t \t \t 
 
\t \t <table class="wccpf_fields_table " cellspacing="0"> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td class="wccpf_label"><label for="_dla_portalu">% 1</label></td> 
 
\t \t \t \t \t <td class="wccpf_value"> 
 
\t \t \t \t \t \t <input type="number" class="wccpf-field" name="_dla_portalu" value="%" placeholder="" min="50" max="100" step="1"> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table> 
 
\t \t 
 
\t \t \t \t \t 
 
\t \t 
 
\t \t \t 
 
\t \t <table class="wccpf_fields_table " cellspacing="0"> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td class="wccpf_label"><label for="_dla_autora">% 2</label></td> 
 
\t \t \t \t \t <td class="wccpf_value"> 
 
\t \t \t \t \t \t <input type="number" class="wccpf-field" name="_dla_autora" value="%" placeholder="" min="0" max="100" step="1"> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table> 
 
\t \t 
 
\t \t \t \t \t 
 
\t \t 
 
\t \t \t 
 
\t \t <table class="wccpf_fields_table " cellspacing="0"> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td class="wccpf_label"><label for="_dla_fundacji">% 3</label></td> 
 
\t \t \t \t \t <td class="wccpf_value"> 
 
\t \t \t \t \t \t <input type="number" class="wccpf-field" name="_dla_fundacji" value="%" placeholder="" min="0" max="100" step="1"> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table> 
 
\t \t 
 
\t \t \t \t \t 
 
\t \t 
 
\t \t \t \t 
 
\t \t <table class="wccpf_fields_table " cellspacing="0"> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td class="wccpf_label"><label for="pln_dla_portalu">PLN 1</label></td> 
 
\t \t \t \t \t <td class="wccpf_value"> 
 
\t \t \t \t \t \t <input type="text" class="wccpf-field" name="pln_dla_portalu" value="" placeholder="" maxlength=""> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table> 
 
\t \t 
 
\t \t \t \t 
 
\t \t 
 
\t \t \t \t 
 
\t \t <table class="wccpf_fields_table " cellspacing="0"> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td class="wccpf_label"><label for="pln_dla_autora">PLN 2</label></td> 
 
\t \t \t \t \t <td class="wccpf_value"> 
 
\t \t \t \t \t \t <input type="text" class="wccpf-field" name="pln_dla_autora" value="" placeholder="" maxlength=""> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table> 
 
\t \t 
 
\t \t \t \t 
 
\t \t 
 
\t \t \t \t 
 
\t \t <table class="wccpf_fields_table" cellspacing="0"> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td class="wccpf_label"><label for="pln_dla_fundacji">PLN 3</label></td> 
 
\t \t \t \t \t <td class="wccpf_value"> 
 
\t \t \t \t \t \t <input type="text" class="wccpf-field" name="pln_dla_fundacji" value="" placeholder="" maxlength=""> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table> 
 
\t \t 
 
\t \t \t \t 
 
\t </div>