Question

不是那么容易解释，所以让我粘贴一些代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" ></script>
<script type="text/javascript">
    $(document).ready(function() {
        calculateSum();
         $(".txt").live("keydown keyup", function() {
            calculateSum();
         });
     });

     function calculateSum() {
        var sum = 0;
        // Iterate through each textboxes and add the values.
        $(".txt").each(function() {
            // Add only if the value is number.
            if (!isNaN(this.value) && this.value.length != 0) {
               sum += parseFloat(this.value);
            }
            else if (this.value.length != 0){
               $(this).css("background-color", "red");
            }
        });
        $("#currentCost").html(sum.toFixed(2));
     }
</script>

首先，我想更新该代码以使用最新版本的jQuery，因为它只适用于1.5我认为。（目前，它只会在所有textareas中添加值并更新span元素）

<td>
    <select name="struct[213]">
        <option selected="selected" value="0"></option>
        <option value="2" data-price="4000">A</option>
        <option value="3" data-price="6000">B</option>
        <option value="4" data-price="8000">C</option>
        <option value="7" data-price="15000">D</option>
        <option value="11" data-price="80000">E</option>
    </select>
</td>
<td>
    <input type="text" size="2" maxlength="4" class="txt"
        name="numUnits[213]" value="0">
</td>

这是textareas之一，都遵循类似的方式，我想用它们做的是将选择中的数据价格乘以textarea中输入的数字（所有textareas和选择具有相同的[ ]跟随名称元素），然后我想在跨度#currentCost中添加所有这些产品：

<td class="L1" width="175">
    Cost: <span class="redmoney" id="currentCost" name="currentCost">$0</span>
</td>

如果这有任何意义......

Answer 1

尝试

$(document).ready(function () {
    calculateSum();
    //register change handler for input and select elements
    $(document).on("keyup, change", ".txt, select", function () {
        calculateSum();
    });
});

function calculateSum() {
    var sum = 0;
    $(".txt").each(function () {
        var value = $.trim(this.value);
        if (value.length && !isNaN(value)) {
            //find the select in the previous td and multiply the value
            sum += parseFloat(value) * ($(this).parent().prev().find('option:selected').data('price') || 0);
            //change back the color
            $(this).css("background-color", "");
        } else if (this.value.length != 0) {
            $(this).css("background-color", "red");
        }
    });
    $("#currentCost").html(sum.toFixed(2));
}

演示：Fiddle

在select中按元素乘以并在文本区域中添加值

1 个答案: