Question

我为幼虫使用ajax，增加或减少数量将显示“购物车已成功更新”。第一次单击向上或向下按钮，如下图所示，这不是问题。信息显示，然后淡出。但是，当我再次单击向上或向下按钮时，该消息也会显示出来，但不再消失。那我知道如何解决这个问题吗？

我将在这里分享我的代码...

以下是控制器文件的代码：-

public function update(Request $request){
  $qty = $request->newQty;
  $rowId = $request->rowID;
  Cart::update($rowId,$qty);
  echo "Cart updated successfully!";
}

这是刀片文件：- 我也将ajax放在刀片文件上：

     <script>
        $(document).ready(function(){
            $("#CartMsg").hide();
            @foreach($data as $pro)
            $("#upCart{{$pro->id}}").on('change keyup', function(){
                var newQty = $("#upCart{{$pro->id}}").val();
                var rowID = $("#rowID{{$pro->id}}").val();
                $.ajax({
                    url:'{{url('/cart/update')}}',
                    data:'rowID=' + rowID + '&newQty=' + newQty,
                    type:'get',
                    success:function(response){
                        $("#CartMsg").show();
                        console.log(response);
                        $("#CartMsg").html(response);
                    }
                });
            });
            @endforeach
        });
    </script>

这里是刀片文件中的div

<div class="alert alert-info" id="CartMsg"></div>
<div class="cart-qty"> <span>Qty: </span>
    <input type="number" max="10" min="1"
     value="{{$pro->qty}}" class="qty-fill"
     id="upCart{{$pro->id}}">
</div>

几乎忘了我忘记了这里重要的部分是淡化我们的部分。

<script>
    $(document).ready(function(){
        $('.alert-info').fadeIn().delay(5000).fadeOut();
    });
</script>

Answer 1

我认为问题在于您将show（）和hide（）函数与fadeIn（）和fadeOut（）混合使用，并且正在使用$（document）.ready（）处理可以更改的内容多次。第一次隐藏#CartMsg是可以的，但是您应该在ajax调用的“成功”部分内进行fadeIn（）-fadeOut（），而无需再次显示#CartMsg（fadeIn（）将完成此工作）。

$.ajax({
    url:'{{url('/cart/update')}}',
    data:'rowID=' + rowID + '&newQty=' + newQty,
    type:'get',
    success:function(response){
        //$("#CartMsg").show();                                  // Delete this
        console.log(response);
        $("#CartMsg").html(response);
        $('.alert-info').fadeIn().delay(5000).fadeOut();         // And add this (using the class or #CartMsg, depends on your html)
    }
});

laravel问题：ajax单击按钮问题

1 个答案: