Question

我正在尝试制作一个订单表单，其中用户从列表和菜单项中选择菜单项以订单形式单独添加。我试图通过jQuery做这件事但是，在这个我面临很多问题。我是jquery的新手。

脚本

    $(document).ready(function () {
        var index  = 0;
        $(".addCart").on('click', function(e) {
            e.preventDefault();
            var menuitem = $(this).parent().parent().find('.menuName').attr("data-value"),
                menuprice = $(this).parent().parent().find('.menuPrice').attr('data-value');

            index++;
            var fieldHTML ='<span class="addMenu">\n'
                              +'<button class="btn-sm btn btn-success increment" id="increase"><i class="fa fa-plus"></i></button>\n'
                              +'<input type="text" value="1" readonly name="quantity" class="quantity">\n'
                              +'<button class="btn-sm btn btn-success decrement" id="decrease"><i class="fa fa-minus"></i></button>\n'
                          +'</span>';

            var fieldHTML2 ='<li id="cartItem_'+index+'" class="page-header">\n'
                            +'<div class="row">\n'
                              +'<div class="">\n'
                                  +'<i class="fa fa-dot-circle-o"> '+menuitem+' </i>\n' 
                              +'</div>\n'
                              +'<div class="col-sm-9" id="">\n'
                                  +'<span>\n'
                                      +'<button class="btn-sm btn btn-success increment" id="increase"><i class="fa fa-plus"></i></button>\n'
                                      +'<input type="text" value="1" readonly name="quantity" class="quantity">\n'
                                      +'<button class="btn-sm btn btn-success decrement" id="decrease"><i class="fa fa-minus"></i></button>\n'
                                      +'<span style="color:grey;"> x <i class="fa fa-inr per_price"> '+menuprice+' </i></span>\n'
                                  +'</span>\n'
                              +'</div>\n'  
                              +'<div class="col-sm-3">\n'
                                  +'<span style="color:grey;"><i class="fa fa-inr sub_price"> '+menuprice+' </i></span>\n'
                              +'</div>\n'
                             +'</div>\n'
                            +'</li>';

            $(this).parent().html(fieldHTML);
            $("#cart").append(fieldHTML2);

            function getTotal() {
                $('.subtotal').show();
                var sum = 0;
                $('.sub_price').each(function () {
                    var menuPrice = Number($(this).text());
                    // add only if the value is number
                    if(!isNaN(menuprice) && menuprice.length!=0) {
                        sum = sum + menuPrice;
                    }
                });
                $('#sum').html(sum.toFixed(2)); 
            }
            getTotal();   

            $(".increment").click(function () {
                var $n = $(this).parent().find(".quantity");

                if($n.val() !=10) {
                    $n.val(Number($n.val())+1);

                    var qty = $('[name="quantity"]').val();  
                    var subPrice = parseInt(qty) * parseFloat(menuprice);
                    $('.sub_price').text(subPrice);
                    getTotal();
                }
            });
            $(".decrement").click(function() {
                var $n = $(this).parent().find(".quantity");

                if($n.val() !=1) {
                    $n.val(Number($n.val())-1);
                    var qty = $('[name="quantity"]').val();
                    var subPrice = parseInt(qty) * parseFloat(menuprice);
                    $('.sub_price').text(subPrice);
                    getTotal();
                } else  {
                    $(".addMenu").remove();
                    $("#cart").remove();
                    $(".AddMenu").html('<button class="btn btn-success addCart">ADD</button>');
                    $('.subtotal').hide();
                }
            });
        });                 
    });

JSP

<div class="col-md-7">
    <ul id="tabs">
        <li class="active">Breakfast</li>
        <li>Lunch</li>
        <li>Dinner</li>
        <li>Choose your menu</li>
    </ul>
    <ul id="tab">
        <li class="active">
            <h2>Breakfast</h2>
            <p></p>
        </li>
        <li>
            <h2>Lunch</h2>
        </li>
        <li>
            <h2>Dinner</h2>
        </li>
        <li>
            <h2>Menu List</h2>

            <div class="row">
                <div class="col-sm-12">
                    <div class="col-sm-9">
                        <div class="col-sm-2">
                            <i class="fa fa-dot-circle-o"></i>
                        </div>
                        <div class="col-sm-6">

                            <p><b class="menuName" data-value="${menu.menuItem}"><c:out value="${menu.menuItem}"/></b></p>

                        </div>
                        <div class="col-sm-2">
                            <i class="fa fa-inr menuPrice" data-value="${menu.price}">  <c:out value="${menu.price}"/></i>
                        </div>
                    </div>
                    <div class="col-sm-3 AddMenu">
                        <button class="btn btn-success addCart">ADD</button>       
                    </div>
                </div>                               
            </div>
            <div class="row">               
            </div>
        </li>
    </ul>
</div>
<div class="col-md-5" id="vendorInfo">
   <h4 class="border-bottom">Your Order</h4>
   <ul id="cart">

   </ul>
   <div class="subtotal" style="display: none">
      <div class="col-sm-10">
          <p style="color:grey; font-weight: bold;">Subtotal</p>
      </div>
      <div class="col-sm-2">
          <span class="fa fa-inr" style="color:grey; font-weight: bold;" id="sum"> </span>
      </div>                        
   </div>
</div>

表单图片

问题

1。首先，递增和递减（+ -）只能工作一个div。点击+或-时，不会增加或减少订单右边的相应项目。

2. 当我第一次添加任何菜单项时，它会添加并计算总数正确，但第二次添加其他项目并点击+，然后第二项目价格乘以第一项目数量。

3. 当前项目小计的其他项目小计。

4. 我希望当任何单个商品数量为1时，然后点击 -，它会再次从购物车和ADD按钮放置在菜单列表中，但实际上当我点击-时，所有购物车项目已移除，而ADD按钮则全部放入菜单列表。

所以，请解决我的问题并告诉我我做错了什么。

谢谢！

JQuery点击事件在不同的div

0 个答案: