Laravel Ajax 添加到购物车按钮

Question

Ajax 请求未隐藏添加购物车按钮且未显示删除购物车按钮，当我单击它插入数据库的产品时添加到购物车，但不隐藏并显示从购物车中删除按钮，我认为问题是从选择 $(this).closest('.content').find('div.removefromcart').hide(); 但我不知道

刀片：

js:

  <script>
  $(document).ready(function() {
  $(".addtocart").click(function(e){
e.preventDefault();
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
    $.ajax({
    url: "{{ route('cart.addtocart') }}", 
    data:{
    'product_id':$(this).data('product-id')
  
    }, 
    type: "post",
    success: function(result){
     
    $("#removed").hide();
    $("#added").show();
    $(this).closest('.content').find('div.removefromcart').hide();
    $(this).closest('.content').find('div.removefromcart').show();

    }
  });
});
});


$( document ).ready(function() {
  $(".removefromcart").click(function(e){
e.preventDefault();
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
    $.ajax({
    url: "{{ route('cart.removefromcart') }}", 
    data:{
    'product_id':$(this).data('product-id')
    }, 
    type: "get",
    success: function(result){
    $("#removed").show();
    $("#added").hide();
    $(this).closest('.content').find('div.addtocart').show();
    $(this).closest('.content').find('div.removefromcart').hide();

    }
  });
});
});
    </script>

html:

    <div class="card-body">
                              <div class="content" style="text-align: center">
                           
                           <span style="color: black;">     {{ $product->title }} </span>
                         @if (Auth::user())
                             
                      
                            <button id="" class="btn btn-primary addtocart" data-product-id={{$product->id}} >Add To Cart</button> 
                    
                          
                            @endif
                         
                       
                                <button id="" style="display: none" class="btn btn-danger removefromcart" data-product-id={{$product->id}}>Remove From Cart</button>   

                              </div>
                            </div>

Answer 1

您需要在 Ajax 之外的某个变量中分配 $(this)，因为内部成功函数 this 引用了 Ajax 调用的 jqXHR object，因此它无法找到您的元素。另外，你没有div.removefromcart 和button.removefromcart，或者你可以写.removefromcart。

演示代码：

$(document).ready(function() {
  $(".addtocart").click(function(e) {
    var selct_ = $(this) //declare this
    e.preventDefault();
    /*  $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });
      $.ajax({
        url: "{{ route('cart.addtocart') }}",
        data: {
          'product_id': $(this).data('product-id')

        },
        type: "post",
        success: function(result) {*/
    //change remove div because its button not div
    selct_.closest('.content').find('.addtocart').hide();
    selct_.closest('.content').find('.removefromcart').show();

    /* }
    });*/

  });
});


$(document).ready(function() {
  $(".removefromcart").click(function(e) {
    e.preventDefault();
    var selct_ = $(this) //declare this
    /*  $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });
      $.ajax({
        url: "{{ route('cart.removefromcart') }}",
        data: {
          'product_id': $(this).data('product-id')
        },
        type: "get",
        success: function(result) {
        */

    selct_.closest('.content').find('.addtocart').show();
    selct_.closest('.content').find('.removefromcart').hide();

    /* }
    });*/
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body">
  <div class="content" style="text-align: center">
    <span style="color: black;">  Something </span>
    <button id="" class="btn btn-primary addtocart" data-product-id="1">Add To Cart</button>
    <button id="" style="display: none" class="btn btn-danger removefromcart" data-product-id="1">Remove From Cart</button>

  </div>
</div>
<div class="card-body">
  <div class="content" style="text-align: center">
    <span style="color: black;">    Something2 </span>
    <button id="" class="btn btn-primary addtocart" data-product-id="2">Add To Cart</button>
    <button id="" style="display: none" class="btn btn-danger removefromcart" data-product-id="2">Remove From Cart</button>
  </div>
</div>