我不知道为什么这段代码如此糟糕。看看:JSFiddle。
当滑块在第一个输入中正确显示值时,简单的数学任务(乘法)计算错误的数字。那是为什么?
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);
});
});
答案 0 :(得分: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>');
$(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>