Javascript 根据值和值计算价格_Javascript_Jquery_Html

Javascript 根据值和值计算价格

javascript jquery html

Javascript 根据值和值计算价格,javascript,jquery,html,Javascript,Jquery,Html,今天我试着用价值和价值来计算价格。然后，输入结果我已经试过这个代码了。这是我的html： <td class="cart-product-price"> <span id="price" class="amount">19.99</span> </td> <td class="cart-product-quantity"> <div class="quantity clearfix">

今天我试着用价值和价值来计算价格。然后，输入结果

我已经试过这个代码了。这是我的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>

所以我想从中获取价格值，'price'字段是一个span，它没有value属性。相反，你需要从中阅读文本。还请注意，“数量”字段有一个id，因此最好将其用作选择器，因为它速度更快。试试这个：

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

.val方法主要用于获取表单元素的值，如input、select和textarea

你试过调试你的代码吗？你看到JS函数中的价格和数量值了吗？你总共得到了什么结果？

<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>

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

<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>