Jquery eval 变量并转换为货币

Question

我有一个 jquery 应用程序，我需要根据表中存在的行数来评估表单中的变量。

期望的行为是找到产品的选定选项，提取值（然后对应于基于变量名称的预定义价格），然后对价格进行操作。我在评估变量名称、转换为数字、然后使用货币插件转换为货币时遇到问题。

这是表格：

    <table id="sizetable" class="table table-responsive table-condensed">
    <thead>
        <tr>
            <td width="30%">Shaft Type<input type="hidden" id="numfields" name="numfields" value="6"></td>
            <td width="25%">Team Message (Free)<br><small>Appears on every shaft - 24 character max</small></td>
            <td>&nbsp;</td>
            <td width="25%">Individual Message<br><small>+$5 each - 24 character max</small></td>
            <td>&nbsp;</td>
            <td width="10%">Shaft Price</td>
            <td width="10%"><button class="add_field_button btn btn-success">Add Shaft <span class="glyphicons glyphicons-circle-plus"></span></button></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><select name="toproduct1" id="toproduct1" class="toproduct">
                    <option value="28">Team Order Specialty Attack Shaft - $25.00</option>
                    <option value="29">Team Order Specialty Defense Shaft - $50.00</option>
                </select>
            </td>
            <td><input type="text" id="teammsg1" name="teammsg1" class="form-control" maxlength="24"></td>
                <td><span class="badge tmsgchr">0</span></td>
            <td><input type="text" id="indmsg1" name="indmsg1" class="form-control indmsg" maxlength="24"></td>
                <td><span class="badge indmsgchr1"></span></td>
            <td><span id="unitprice1"></span></td>
            <td><a class="remove_field btn btn-danger" disabled>Remove <span class="glyphicons glyphicons-circle-minus"></span></a></td>
        </tr>
        <tr>
            <td><select name="toproduct2" id="toproduct2" class="toproduct">
<option value="28">Team Order Specialty Attack Shaft - $25.00</option>
<option value="29">Team Order Specialty Defense Shaft - $50.00</option>
</select>
            </td>
            <td><span class="tmsg light-gray"></td>
                <td></td>
            <td><input type="text" id="indmsg2" name="indmsg2" class="form-control indmsg" maxlength="24"></td>
                <td><span class="badge indmsgchr2"></span></td>
            <td><span id="unitprice2"></span></td>
            <td><a class="remove_field btn btn-danger" disabled>Remove <span class="glyphicons glyphicons-circle-minus"></span></a></td>
        </tr>
...

我写的jquery如下：

$(document).ready(function() {  
    var max_fields      = 20; //maximum input boxes allowed
    var min_fields      = 6; //minimum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    var ordertot        = 0;
    var indbrandcost    = 5;
    var shaftprice      = 0;

$(".toproduct, .indmsg").on('keyup keypress blur change paste cut', function(){
        var id28 = 25; //dynamically written based on item price
        var id29 = 50;

//loop through all fields, check if that row exists, then see which selection matches up with id28 or 1d29 above, then do something
        for(i = 1; i < max_fields; i++) { 
            if($('#toproduct'+i).val() != '') {
            var f = $('#toproduct'+i).find('option:selected').attr('value');
                if($('#indmsg'+i).val() != '') {
                    $('#unitprice'+i).text((eval('id'+f)+5).currency()); //getting error here
                    //var shaftprice = shaftprice + indbrandcost;
                }
                else {
                    $('#unitprice'+i).text((eval('id'+f)).currency()); // getting error here
                }
            }

        }

    });

Answer 1

您的代码中有几个错误。我创建了一个可以工作的代码笔：https://codepen.io/pahund/pen/xqpByN?editors=1011

相关代码：

$(".toproduct, .indmsg").on('keyup keypress blur change paste cut', function() {
    var id28 = 25; //dynamically written based on item price
    var id29 = 50;

    //loop through all fields, check if that row exists, then see which selection matches up with id28 or 1d29 above, then do something
    for (var i = 1; i < max_fields; i++) {
        var f = $('#toproduct' + i).val();
        if (f) {
            if ($('#indmsg' + i).val() !== '') {
                $('#unitprice' + i).text((eval('id' + f) + 5)); //getting error here
            } else {
                $('#unitprice' + i).text((eval('id' + f))); // getting error here
            }
        }
    }
});

• 在您的 for-look 中，在 I 之前添加了一个 var（否则您将创建一个全局变量 window.i
• 使用val()获取下拉菜单的值
• 只需检查变量 f 是否已定义，而不是测试空字符串，否则您将尝试为不存在的元素 topproduct3 创建一个值（此导致错误“Uncaught ReferenceError: idundefined”)
• 从表达式中删除了 currency 插件，该插件使用 $.text() 将值添加到跨度 - 此表达式的结果是一个字符串，您不能运行一个 jQuery 插件
• 使用 !== 而不是 !=（最佳实践，总是更喜欢 !== 和 === 而不是 != 和 ==）