1. 首頁
  2. 問答
  3. jquery - 攔截，實時計算和顯示列表框的選擇

jquery - 攔截，實時計算和顯示列表框的選擇

2012-07-27 43 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

相關問題

 相關問題