jquery - 实时拦截、计算和显示列表框选项答案

【问题标题】：jquery - intercept, calculate and show in real time the list boxes choicesjquery - 实时拦截、计算和显示列表框选项
【发布时间】：2012-07-27 16:37:23
【问题描述】：

我有一个简单而基本的 jquery 函数，用于计算某些产品的数量 * 单价 + 税金和小计，然后是总数。我希望根据用户在列表框中的选择，使用 jquery 实时显示不同税率的税收进口。我找到了一种适用于 2 种产品的基本方法，但对于 3 种或多种产品，我的方法不起作用：请帮帮我？ ;)

这是我的代码：demo is [here] 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>

【问题讨论】：

标签： jquery listbox real-time intercept

【解决方案1】：

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

【讨论】：

嗨@Kei 非常有用和有趣的解决方案：这不是我喜欢做的事，但它非常接近我的愿望；你的代码太棒了！我只需要制定一个程序，以相同的税率实时加税......

【解决方案2】：

这不是一个完整的答案，因为那里有太多我不理解的变量名称。但希望它会有一些用处。

第 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 的东西，不再需要了 :)

【讨论】：

嗨，马特，非常感谢您的提示，对于我纠结的问题，我很抱歉：它们是非常有用的提示......也适用于未来：现在代码更加简洁和专业。唯一的事情是..我想要一个例程来显示或不显示税额除以税率..我添加了演示..看看如果你改变列表框的值会发生什么......如果他们是是否相等...谢谢
啊，是的，我明白你在说什么。获得每行的货币税值后，您需要计算每个百分比组中的总税额。编辑了我的答案以添加它，希望它有所帮助。