根据<跨度>值和<投入>值计算价格

Calculating price from <span> value and <input> value

本文关键字：计算 投入 跨度 根据 值和      更新时间：2023-09-26

今天我尝试从<span>值和<input>值来计算价格。然后，将结果放在<span>

.

我已经尝试过这段代码。这是我的 html：

<td class="cart-product-price">
    <span id="price" class="amount">19.99</span>
</td>    
<td class="cart-product-quantity">
    <div class="quantity clearfix">
         <input type="button" value="-" class="minus" field="quantity">
         <input type="text" id="quantity" name="quantity" value="2" class="qty" />
         <input type="button" value="+" class="plus" field="quantity">
    </div>
</td>    
<td class="cart-product-subtotal">
    <span id="total" class="amount"></span>
</td>

所以我想从<span id="price>中获取价格值，从<input type="text" id="quantity" name="quantity">中获取数量，并将结果放在<span id="total" class="amount"></span>

这是我的脚本代码：

<script type="text/javascript">
    var price = parseFloat($('#price').val()) || 0;
    var qty = parseInt($('input[name=quantity]').val());
    var total = price*qty;
    $('#total').text(total);
</script>

注意：我正在使用JQuery来增加/减少数量（加减按钮）

我写错了什么吗？

谢谢

更新

这是我增加/减少的javascript代码：

<script type="text/javascript">
        jQuery(document).ready(function(){
            // This button will increment the value
            $('.plus').click(function(e){
                // Stop acting like a button
                e.preventDefault();
                // Get the field name
                fieldName = $(this).attr('field');
                // Get its current value
                var currentVal = parseInt($('input[name='+fieldName+']').val());
                // If is not undefined
                if (!isNaN(currentVal)) {
                    // Increment
                    $('input[name='+fieldName+']').val(currentVal + 1);
                } else {
                    // Otherwise put a 0 there
                    $('input[name='+fieldName+']').val(0);
                }
            });
            // This button will decrement the value till 0
            $(".minus").click(function(e) {
                // Stop acting like a button
                e.preventDefault();
                // Get the field name
                fieldName = $(this).attr('field');
                // Get its current value
                var currentVal = parseInt($('input[name='+fieldName+']').val());
                // If it isn't undefined or its greater than 0
                if (!isNaN(currentVal) && currentVal > 0) {
                    // Decrement one
                    $('input[name='+fieldName+']').val(currentVal - 1);
                } else {
                    // Otherwise put a 0 there
                    $('input[name='+fieldName+']').val(0);
                }
            });
        });
    </script>

"价格"字段是一个span，它没有value属性。相反，您需要从中读取text()。另请注意，"数量"字段有一个 id ，因此您最好将其用作选择器，因为它要快得多。试试这个：

var price = parseFloat($('#price').text()) || 0;
var qty = parseInt($('#quantity').val());
var total = price * qty;
$('#total').text(total);

工作示例

var price = parseFloat($('#price').text()) || 0; //parseFloat($('#price').val()) || 0;
var qty = parseInt($('input[name=quantity]').val());
var total = price * qty;
$('#total').text(total);

.val（） 方法主要用于获取表单元素的值，例如输入、选择和文本区域

小提琴演示

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <style>
            .active {
                color:red;
            }
        </style>
    <script>
        $(document).ready(function () {
            var price = parseFloat($('#price').text()) || 0;
            var qty = parseInt($('input[name=quantity]').val());
            var total = price * qty;
            $('#total').text(total);
        });
    </script>
    </head>
    <body>
        <table>
            <tr>
                <td class="cart-product-price">
    <span id="price" class="amount">19.99</span>
</td>    
<td class="cart-product-quantity">
    <div class="quantity clearfix">
         <input type="button" value="-" class="minus" field="quantity">
         <input type="text" id="Text1" name="quantity" value="2" class="qty" />
         <input type="button" value="+" class="plus" field="quantity">
    </div>
</td>    
<td class="cart-product-subtotal">
    <span id="total" class="amount"></span>
</td>
            </tr>
        </table>
    </body>
    </html>
相关文章：