javascript - Jquery - 输入数据传输不精确

Question

我不知道为什么这段代码运行得如此糟糕。看看:JSFiddle .

虽然 slider 在第一个输入中正确显示值，但简单的数学任务(乘法)计算出错误的数字。这是为什么？

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);     
    });

});

Answer 1

您的错误是由于 slider 的 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>');
	

  $(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);		
    });	
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


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