1. 首页
  2. 问答
  3. jquery - 拦截，实时计算和显示列表框的选择

jquery - 拦截，实时计算和显示列表框的选择

2012-07-27 68 views
0

我有一个简单和基本的jquery函数，用于计算一些产品的数量*单价+税和小计，然后是总数。我希望根据用户在列表框中的选择，实时显示jquery，不同税率的税收进口情况。我发现了2种产品的基本方法，但对于3种或多种，​​我的方法不起作用：请帮助我？ ;）jquery - 拦截，实时计算和显示列表框的选择

这是我的代码：试玩版[点击这里] http://jsfiddle.net/skipperit/px9tb/8/

<script type='text/javascript'> 
$(function(){ 
$('#q1,#pu1,#tax1,#tax2,#q2,#pu2').change(function() { 
var q1 = parseFloat($('#q1').val(), 10); 
var qval1 = 0; 
if (q1 > 0) { 
    qval1 = q1; 
} 
var q2 = parseFloat($('#q2').val(), 10); 
var qval2 = 0; 
if (q2 > 0) { 
    qval2 = q2; 
} 


var pu1 = parseFloat($('#pu1').val(), 10); 
var puval1 = 0; 
if (pu1 > 0) { 
    puval1 = pu1; 
} 

var pu2 = parseFloat($('#pu2').val(), 10); 

var puval2 = 0; 
if (pu2 > 0) { 
    puval2 = pu2; 
} 

var subtot1 = 0; 
subtot1 = parseFloat(qval1 * puval1); 
var subtot2 = 0; 
subtot2 = parseFloat(qval2 * puval2); 
var subtot = 0; 
subtot = subtot1 + subtot2; 
var tax1 = parseFloat($('#tax1').val(), 10); 
var tax2 = parseFloat($('#tax2').val(), 10); 
var ivaprice1 = 0; 
var ivaprice2 = 0; 
if (tax1 > 0) { 

    ivaprice1 = subtot1 * tax1/100; 
} 
if (tax2 > 0) { 

    ivaprice2 = subtot2 * tax2/100; 
} 
var ivaprice = 0; 
ivaprice = parseFloat(ivaprice1 + ivaprice2); 
var ivatext = ""; 
ivatext = "tax "; 

$('#total').html(parseFloat(subtot + ivaprice).toFixed(2)); 
$('#tasse').html(parseFloat(ivaprice).toFixed(2)); 
$('#imp').html(parseFloat(subtot).toFixed(2)); 
$('#subtot1b').html(parseFloat(subtot1).toFixed(2)); 
$('#subtot2b').html(parseFloat(subtot2).toFixed(2)); 

if (tax2 == tax1) { 
    $('#taxw').html(parseInt(tax1)); 
    $('#taxtxt2').html(''); 
    $('#taxw2').html(''); 
    $('#taxv').html(parseFloat(ivaprice).toFixed(2)); 
    $('#taxv2').html(''); 
    $('#taxtxt2b').html(''); 
} 
else 
{ 
    $('#taxw').html(parseInt(tax1)); 
    $('#taxw2').html(parseInt(tax2)); 
    $('#taxtxt2').html('tax'); 
    $('#taxtxt2b').html('%:'); 
    $('#taxv').html(parseFloat(ivaprice1).toFixed(2)); 
    $('#taxv2').html(parseFloat(ivaprice2).toFixed(2)); 
} 

}); 
}); 

</script> 


</head> 
<body> 
<p>q1 : 
<input id="q1" value="0"/> 

pu1 : 
<input id="pu1" value="0"/> 
tax1: 
<select name="tax1" id="tax1"> 
<option value="4">4</option> 
<option value="21">21</option> 
<option value="16">16</option> 
</select> 
</p> 
<p>q2 : 
<input id="q2" value="0"/> 
pu2 : 
<input id="pu2" value="0"/> 
tax2 : 
<select name="tax2" id="tax2"> 
<option value="4">4</option> 
<option value="21">21</option> 
<option value="16">16</option> 
</select> 
<br> 
<br>subtot1: <span id="subtot1b"></span><br> 
subtot2: <span id="subtot2b"></span><br> 
tax <span id="taxw"></span>%: <span id="taxv"></span><br> 
<span id="taxtxt2"></span> <span id="taxw2"></span><span id="taxtxt2b"></span> <span id="taxv2"></span><br> 

taxable: €<span id="imp"></span><br> 
Tax: €<span id="tasse"></span><br> 
Total price : €<span id="total"></span></p> 
</body>

来源

2012-07-27 user1558177

+0

TKS的更正;） – user1558177 2012-07-27 18:02:15

回答

0

DEMO HERE

HTML：

​<div id="uguu" data-row="5"></div>​​​​​​​​​​​​​​​​​​​​​​​​

JS：

$(function() { 
    (function($) { 
     $.fn.extend({ 
      autobotTransform: function() { 
       return this.each(function() { 
        // variables 
        var _this = $(this); 
        var prodCount = _this.attr("data-row"); 
        var _opt = '<option value="4">4</option><option value="21">21</option><option value="16">16</option>'; 

        // set-up 
        for (i = 1; i <= prodCount; i++) { 
         _this.append('<p class="priceRow">q' + i + ' :<input id="q' + i + '" value="0" />' + 
            'pu' + i + ' :<input id="pu' + i + '" value="0" />' + 
            'tax' + i + ':<select name="tax' + i + '" id="tax' + i + '">' + 
            _opt + '</select>' 
            ); 
        } 
        for (i = 1; i <= prodCount; i++) { 
         _this.append('subtot' + i + ': <span id="subtot' + i +'"></span> ' + 
            'tax <span id="taxw' + i + '"></span>%: <span id="taxv' + 
            i + '"></span><br>' 
            ); 
        } 
        $("input, select", _this).on("change", function() { 
         $('p.priceRow').each(function(index) { 
          var __this = $(this); 
          var i = index + 1; 
          $("#subtot" + i).html(
           ((($("#q" + i).val() > 0) ? parseFloat($("#q" + i).val(), 10) : 0.00) 
           * (($("#pu" + i).val() > 0) ? parseFloat($("#pu" + i).val(), 10) : 0.00)).toFixed(2) 
          ); 
          $("#taxw" + i).html($("#tax" + i).val()); 
          $("#taxv" + i).html(($("#subtot" + i).html() * $("#tax" + i).val() * 0.01).toFixed(2)); 
         }); 
        }).trigger("change"); 
       }); 
      } 
     }); 
    })(jQuery); 

    $("#uguu").autobotTransform();​ 
});

来源

2012-07-27 18:20:13 kei

+0

嗨@Kei非常有用和有趣的解决方案：不完全是我喜欢做的，但它非常接近我的愿望;你的代码太棒了！我只需要做一个例程，实时添加税率相同的税率...... – user1558177 2012-07-27 20:53:40

0

这不是一个完整的答案，因为有上有太多的事情与我不懂太多的变量名。但希望它会有一些用处。

第1步：添加一个类到任何字段，如果发生改变，应该触发重新计算。这将使你做出一个jQuery选择了所有的人，如：

<input id="q1" value="0" class="change-trigger" />

和

$('.change-trigger').change(function() { ... });

第2步：，因为它似乎你需要的任何变化重新计算一切，你可以尝试将相关字段中的值读入对象，并将对象存储在数组中，例如（在上面的处理函数中）：

var allValues = []; 
$('.change-trigger').each(function(idx) // do something with all .change-trigger elements 
{ 
    var values = {}; 
    values.q = Math.max(0, parseFloat($('#q' + idx).val(), 10)); 
    values.pu = Math.max(0, parseFloat($('#pu' + idx).val(), 10)); 
    values.tax = Math.max(0, parseFloat($('#tax' + idx).val(), 10)); 
    values.pretaxtotal = values.q * values.pu; 
    values.taxtotal = (values.pretaxtotal * values.tax)/100; 
    values.linetotal = values.pretaxtotal + values.taxtotal; 

    allValues[idx] = values; 
} 

// later calculations using a loop over the allValues array, e.g. 
var taxBandTotals = [], lowTax = 100.0, highTax = 0.0, taxIndex; 
for (var i = 0; i < allValues.length; i+=1) 
{ 
    // sum up each tax band by adding to index [tax%] in array 
    if (allValues[i].tax > 0) 
    { 
     lowTax = Math.min(lowTax, allValues[i].tax); 
     highTax = Math.max(highTax, allValues[i].tax); 
     taxIndex = parseInt(allValues[i].tax, 10); 

     // initialise to 0 

     if (taxBandTotals[taxIndex] === undefined) 
     { taxBandTotals[taxIndex] = 0; } 

     // add this entry's tax to the right slot 
     taxBandTotals[taxIndex] += allValues[i].taxtotal; 

    } 

    // aggregate values into totals etc. 
    // could play with loop variable to look ahead/behind for 
    // comparison with other tax values? 
} 

for (var j = parseInt(lowTax, 10); j <= parseInt(highTax, 10); j+=1) 
{ 
    if (taxBandTotals[j] !== undefined) 
    { 
     // this is a total for tax % "j" 
    } 
}

步骤3：取出CDATA的东西，就没有必要再:)

来源

2012-07-27 17:04:37

+0

嗨马特，非常感谢您的提示，我为我的纠结问题感到抱歉：他们是非常有用的提示......也是对未来的要求：现在代码更加干净和亲。唯一的事情是......我想要一个例程来显示或不是税率除以费率..我添加演示..查看如果你改变列表框的值会发生什么......如果他们是等于彼此或不...谢谢 – user1558177 2012-07-27 20:45:55

+0

啊，是的，我可以看到你在说什么。一旦您获得每一行的货币税额，就需要计算每个百分比组的税收总额。编辑我的答案补充说，希望它有帮助。 – 2012-08-02 16:52:42

相关问题

 相关问题