标签中的值显示为NaN

时间:2019-02-26 00:10:56

标签: jquery symfony

当我单击+按钮时,我想计算产品的总价

这是我的结帐页面的视图:

<div id="checkout-cart" class="container">

    <div class="row">
        <div id="content" class="col-sm-12">

            <form action="https://demo.templatetrip.com/Opencart/OPC06/OPC190_nursery/OPC01/index.php?route=checkout/cart/edit" method="post" enctype="multipart/form-data" class="cart-form">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <td class="text-center">ID</td>
                            <td class="text-center">Image</td>
                            <td class="text-left">Product Name</td>
                            <td class="text-left">Model</td>
                            <td class="text-left">Quantity</td>
                            <td class="text-left">Action</td>
                            <td class="text-right">Unit Price</td>
                        </tr>
                        </thead>
                        {% for cart in carts  %}

                            <tbody>
                            <tr>
                                <td class="text-left">{{ cart.id }}"</td>

                                <td class="text-center">
                                    <a href="https://demo.templatetrip.com/Opencart/OPC06/OPC190_nursery/OPC01/index.php?route=product/product&amp;product_id=28"><img src="{{ cart.product.productimage }}" style="width: 80px; height: 140px" alt="aspetur autodit autfugit" title="aspetur autodit autfugit" class="img-thumbnail"></a> </td>
                                <td class="text-left"><a href="https://demo.templatetrip.com/Opencart/OPC06/OPC190_nursery/OPC01/index.php?route=product/product&amp;product_id=28">{{cart.product.productname }}</a>
                                    <br>
                                <td class="text-left">{{ cart.product.category }}</td>

                                <td>
                                    <div class="form-group--number">
                                        <button type="button" id="{{ cart.id }}" class="minus" onclick="sousAction(this.id);"><span>-</span></button>
                                        <input id="q{{ cart.id }}" class="form-control" type="text" value="0">
                                        <button type="button" id="{{ cart.id }}" class="plus" onclick="addAction(this.id)"><span>+</span></button>
                                    </div>
                                </td>

                                <td class="text-left"><div class="cart_input_block input-group btn-block" style="max-width: 200px;">
                                        <a id="remove" href="{{ path('_cupcakes_cart_remove',{id:cart.id }) }}"> Remove</a>

                                </td>
                                <td class="text-right unit-price">{{ cart.product.price }}</td>
                            </tr>
                            </tbody>
                        {% endfor %}
                    </table>
                </div>
            </form>
            <div class="row">


                <div class="col-sm-4 sub-total-table">
                    <table class="table table-bordered">
                        <tbody>
                        <tr>
                            <td class="text-right heading-title"><strong>Total:</strong></td>
                            <td class="text-right total-amount" id="total">{{ price }}</td>
                        </tr>
                        </tbody></table>
                </div>
            </div>

            <div class="buttons">

                <div class="pull-left"><a href="{{ path('productfront_index') }}" class="btn btn-default cnt">Continue Shopping</a></div>
                <div class="pull-right"><a href="https://demo.templatetrip.com/Opencart/OPC06/OPC190_nursery/OPC01/index.php?route=checkout/checkout" class="btn btn-primary checkout">Checkout</a></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="{{ asset('jquery.js') }}"></script>

这是我用来计算总价的jquery脚本,我尝试与控制器一起使用,但是它似乎不起作用,加上在不重新加载页面的情况下更好地计算数量

<script type="text/javascript">

    $(function () {
        $('[id="remove"]').on('click', function(e) {
            location.reload();
            var href = this.href;
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: href,
                dataType: 'json',
                success: function(json) {

                    console.log(json);
                }
            });
        });
    });

    function addAction(ok)
    {

        var plus=$('#q'+ok).val();
        $('#q'+ok).val(parseInt(plus)+1);
        var quantity=parseInt($('#q'+ok).val());
        var price1 =parseFloat($('#price'+ok).text());

        $('#total'+ok).html((quantity*price1).toFixed(2));
        var total =parseFloat($('#total').text())+price1;
        $('#total').html(total.toFixed(2));
    }

    function sousAction(id)
    {

        var moin=$('#q'+id).val();
        if(((parseInt(moin) - 1)>0)) {
            $('#q'+id).val(parseInt(moin) - 1);
            var quantity=parseInt($('#q'+id).val());
            var price1 =parseFloat($('#price'+id).text());
            $('#total'+id).html((quantity*price1).toFixed(2));
            var total =parseFloat($('#total').text())-price1;
            $('#total').html(total.toFixed(2));
        }

    }



</script>
{% endblock %}

1 个答案:

答案 0 :(得分:2)

两个按钮上的ID相同     

由于您要添加功能,因此我没有找到任何带有id('#price'+ ok)的标签

无论如何,问题实际上在price1变量中存在 您仍然需要更改一行

function addAction(ok)
{
    var plus=$('#q'+ok).val();
    $('#q'+ok).val(parseInt(plus)+1);
    var quantity=parseInt($('#q'+ok).val());
 //  var price1 =parseFloat($('#price'+ok).text()); commented original
    var price1 =parseFloat($('#price'+ok).val()); //added this line

    $('#total'+ok).html((quantity*price1).toFixed(2));
    var total =parseFloat($('#total').text())+price1;
    $('#total').html(total.toFixed(2));
}

希望这可以解决您的问题