如何從if條件刀片檔案在jquery中傳遞資料-有解無憂

我有兩種型別的產品，一種有屬性，一種沒有屬性。我想使用 jquery 將產品添加到串列頁面中的購物車，這樣在單擊添加到購物車按鈕時，產品就會添加到購物車 table.for具有屬性的產品，用戶必須選擇一個屬性，但對于具有屬性的產品，它只會添加到購物車中。

<div class="fs-sm mb-4">
 <input name="quantity" type="number" value="1" class="prod_qty" >
  <input class="prod_id<?php echo $countp;?>" name="product_id" type="hidden" value="{{ $product->id }}">
    @if ($product->is_attribute==0)
      <input class="prodsize" name="productattrsize" type="text" value="small">
      <div class="d-flex align-items-center justify-content-between pt-3">
      <div class="d-flex flex-row">
         <?php $discountedprice=Merchadise::getdiscountedprice($product->id);?>
         <!-- Product price-->
         @if ($discountedprice>0)
            <del><p class="lead text-muted text-decoration-line-through">sh {{$product->merch_price }}</p></del>
            <p class="lead text-muted text-decoration-line-through" style="float-right">sh {{ $discountedprice }}</p>
         @else
             <p class="lead text-muted text-decoration-line-through">sh {{$product->merch_price }}</p>
         @endif
       </div>
     </div>
                    @elseif ($product->is_attribute==1)
                        <select class="custom-select prodsize" productid="{{ $product->id }}" name="productattrsize">
                            <option value="">Select</option>
                            @foreach ($product->merchadiseattributes as $attribute )
                                <option value="{{ $attribute->productattr_size }}" required>{{ $attribute->productattr_size }}</option>
                            @endforeach
                        </select>
                        <div class="d-flex align-items-center justify-content-between pt-3">
                            <div class="d-flex flex-row">
                                <?php $discountedprice=Merchadise::getdiscountedprice($product->id);?>
                                <!-- Product price-->
                                @if ($discountedprice>0)
                                    <del>
                                        <p class="lead text-muted text-decoration-line-through" id="showattrprice">sh {{$product->merch_price }}</p>
                                    </del>
                                    <p class="lead text-muted text-decoration-line-through ml-3" id="showcalculatedattrprice" style="float-right">sh {{ $discountedprice }}</p>
                                @endif
                            </div>
                        </div>
                    @endif
                    <div class="d-flex ">
                        <a href="{{ url('merchadise/'.Str::slug($product->merch_name).'/'.$product->id) }}" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
                        <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart<?php echo $countp;?>">Add to Cart</a>
                        <div id="successmsg<?php echo $countp;?>" class="alert alert-message bg-grey text-dark"></div>
                    </div>
                </div>

這里的情況是對于沒有屬性的產品，尺寸將被傳遞為小，但對于下拉選單，將選擇所選選項。我遇到的問題是我的 jquery 代碼僅在我選擇的第一個屬性選項上進行選擇。也它沒有抓取沒有屬性的產品的尺寸，這個..這是我的 jquery 代碼。

            $('.add-to-cart').click(function(e) { e.preventDefault();
            var prod_id=$(this).closest('.ps-shop').find('.prod_id<?php echo $i;?>').val();
            var prod_qty=$(this).closest('.ps-shop').find('.prod_qty').val();
            var prod_size=$(this).closest('.ps-shop').find('.prodsize').val();
            alert(prod_size)
            if(prod_size==""){
                alert("Please Select An Attribute");
                return false;
            }
            $.ajax({
                method:"post",
                url:"add_to_cart",
                data:{
                    'productattrsize':prod_size,
                    'product_id':prod_id<?php echo $i;?>,
                    'quantity':prod_qty,
                },
                success:function(response){
                    // console.log(response)
                    $('.add-to-cart<?php echo $i;?>').hide();
                    $('#successmsg<?php echo $i;?>').show();
                    $('#successmsg<?php echo $i;?>').append('product has been added to cart');
                }
            });
        });

這就是 html 代碼在瀏覽器中的樣子

    <div class="row">
     <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
        <div class="card"> 
          <img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 With Attributes-5074.PNG">
            <div class="card-body">
              <h6 class="font-weight-bold pt-1">5.Merchadise 2 With Attributes</h6>
              <div class="d-flex align-content-center justify-content-center">
                <span class="pt-1">Tshirts</span>
              </div>
                1.<span class="pt-1">cotton</span>
                        <hr>
                        2.<span class="pt-1">wedding</span>
                        <div class="fs-sm mb-4">
                            <input name="quantity" type="number" value="1" class="prod_qty">
 <input class="prod_id0" name="product_id" type="hidden" value="5">
<select class="custom-select prodsize" productid="5" name="productattrsize">
 <option value="">Select</option>                                                            
  <option value="Green" required="">Green</option>                            
  <option value="Black" required="">Black</option>                           
  <option value="Blue" required="">Blue</option>                         </select>
<div class="d-flex align-items-center justify-content-between pt-3"><div class="d-flex flex-row">                                                      <!-- Product price-->                                                  <del>
                                                <p class="lead text-muted text-decoration-line-through" id="showattrprice">sh 300</p>
                                            </del>
                                            <p class="lead text-muted text-decoration-line-through ml-3" id="showcalculatedattrprice" style="float-right">sh 270</p>
                                                                            </div></div>
  <div class="d-flex ">
     <a href="http://djvoskill/merchadise/merchadise-2-with-attributes/5" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
                                <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart0">Add to Cart</a>
                                <div id="successmsg0" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                                <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
                <div class="card"> 
                    <img class="card-img-top" src="http://djvoskill/images/productimages/small/Product 1 with No Attributes-667.PNG">
                    <div class="card-body">
                        <h6 class="font-weight-bold pt-1">4.d.Merchadise 1 with Attributes</h6>
                        <div class="d-flex align-content-center justify-content-center">
                            <span class="pt-1">Tshirts</span>
                        </div>
                        1.<span class="pt-1">leather</span>
                        <hr>
                        2.<span class="pt-1">casual</span>
                        <div class="fs-sm mb-4">
                            <input name="quantity" type="number" value="1" class="prod_qty">
                            <input class="prod_id1" name="product_id" type="hidden" value="4">
<select class="custom-select prodsize" productid="4" name="productattrsize">
                                    <option value="">Select</option>                                       <option value="Small" required="">Small</option>                         <option value="Medium" required="">Medium</option>                   </select><div class="d-flex align-items-center justify-content-between pt-3"><div class="d-flex flex-row">
                                                                                <!-- Product price-->
                                                                                    <del>
                                                <p class="lead text-muted text-decoration-line-through" id="showattrprice">sh 200</p>
                                            </del>
                                            <p class="lead text-muted text-decoration-line-through ml-3" id="showcalculatedattrprice" style="float-right">sh 180</p>                                                                            </div></div>
<div class="d-flex ">
                                <a href="http://djvoskill/merchadise/dmerchadise-1-with-attributes/4" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
                                <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart1">Add to Cart</a>
                                <div id="successmsg1" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                                <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
                <div class="card"> 
                    <img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 NoAttributes-7262.jpg">
                    <div class="card-body">
                        <h6 class="font-weight-bold pt-1">3.c.Merchadise 2 NoAttributes</h6>
                        <div class="d-flex align-content-center justify-content-center">
                            <span class="pt-1">Tshirts</span>
                        </div>
                        1.<span class="pt-1">woolen</span>
                        <hr>
                        2.<span class="pt-1">casual</span>
                        <div class="fs-sm mb-4">
                            <input name="quantity" type="number" value="1" class="prod_qty">
                            <input class="prod_id2" name="product_id" type="hidden" value="3">
<input class="prodsize" name="productattrsize" type="text" value="small">
                                <div class="d-flex align-items-center justify-content-between pt-3">
                                    <div class="d-flex flex-row">
                                                                                <!-- Product price-->
                                                                                    <del>
                                                <p class="lead text-muted text-decoration-line-through">sh 301</p>
                                            </del>
                                            <p class="lead text-muted text-decoration-line-through" style="float-right">sh 204.68</p>
                                                                            </div>
                                </div>
                    
                                                        
                            <div class="d-flex ">
                                <a href="http://djvoskill/merchadise/cmerchadise-2-noattributes/3" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
                                <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart2">Add to Cart</a>
                                <div id="successmsg2" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                                <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
                <div class="card"> 
                    <img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 NoAttributes-2100.jpg">
                    <div class="card-body">
                        <h6 class="font-weight-bold pt-1">2.b.Merchadise 2 NoAttributes</h6>
                        <div class="d-flex align-content-center justify-content-center">
                            <span class="pt-1">Tshirts</span>
                        </div>
                        1.<span class="pt-1">woolen</span>
                        <hr>
                        2.<span class="pt-1">wedding</span>
                        <div class="fs-sm mb-4">
                            <input name="quantity" type="number" value="1" class="prod_qty">
                            <input class="prod_id3" name="product_id" type="hidden" value="2">

                            
                                                            <input class="prodsize" name="productattrsize" type="text" value="small">
                                <div class="d-flex align-items-center justify-content-between pt-3">
                                    <div class="d-flex flex-row">
                                                                                <!-- Product price-->
                                                                                    <del>
                                                <p class="lead text-muted text-decoration-line-through">sh 200</p>
                                            </del>
                                            <p class="lead text-muted text-decoration-line-through" style="float-right">sh 180</p>
                                                                            </div>
                                </div>
                    
                                                        
                            <div class="d-flex ">
                                <a href="http://djvoskill/merchadise/bmerchadise-2-noattributes/2" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
                                <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart3">Add to Cart</a>
                                <div id="successmsg3" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                                <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
                <div class="card"> 
                    <img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 1 Attributes-6135.jpg">
                    <div class="card-body">
                        <h6 class="font-weight-bold pt-1">1.a.Merchadise 1 NoAttributes</h6>
                        <div class="d-flex align-content-center justify-content-center">
                            <span class="pt-1">Tshirts</span>
                        </div>
                        1.<span class="pt-1">cotton</span>
                        <hr>
                        2.<span class="pt-1">wedding</span>
                        <div class="fs-sm mb-4">
                            <input name="quantity" type="number" value="1" class="prod_qty">
                            <input class="prod_id4" name="product_id" type="hidden" value="1">

                            
                                                            <input class="prodsize" name="productattrsize" type="text" value="small">
                                <div class="d-flex align-items-center justify-content-between pt-3">
                                    <div class="d-flex flex-row">
                                                                                <!-- Product price-->
                                                                                    <del>
                                                <p class="lead text-muted text-decoration-line-through">sh 1</p>
                                            </del>
                                            <p class="lead text-muted text-decoration-line-through" style="float-right">sh 0.9</p>
                                                                            </div>
                                </div>
                    
                                                        
                            <div class="d-flex ">
                                <a href="http://djvoskill/merchadise/amerchadise-1-noattributes/1" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
                                <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart4">Add to Cart</a>
                                <div id="successmsg4" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>              
</div>

我怎樣才能做到這一點，如果產品選擇一個選項，則傳遞所選選項，但如果產品沒有屬性，則將 small 的值傳遞給函式。

uj5u.com熱心網友回復：

您將在下面找到一個可div.card根據您的需求處理所有元素的作業片段：

// url for testing:
const url="https://jsonplaceholder.typicode.com/users/";

$(".row").on("click","a[class*=add-to-cart]",function(ev){
 const card=$(this).closest(".card-body"),
  sizeSel=$("select",card);
 if(sizeSel.length>0&&sizeSel.val()=="") alert("Please specify your size/colour!")
 else
 $.ajax({method:"post",url:url,
  data:{
   productattrsize:sizeSel.length?sizeSel.val():"small",
   product_id:$("[name=product_id]",card).val(),
   quantity:$(".prod_qty",card).val ()},
  success:response=>{
   console.log(response)
   $(this).hide();
   $('.alert',card).show().append('product has been added to cart');
  }
 });
})

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="row">
  <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
  <img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 With Attributes-5074.PNG">
  <div class="card-body">
    <h6 class="font-weight-bold pt-1">5.Merchadise 2 With Attributes</h6>
    <div class="d-flex align-content-center justify-content-center">
      <span class="pt-1">Tshirts</span>
    </div>
    1.<span class="pt-1">cotton</span>
    <hr>
    2.<span class="pt-1">wedding</span>
    <div class="fs-sm mb-4">
      <input name="quantity" type="number" value="1" class="prod_qty">
      <input class="prod_id0" name="product_id" type="hidden" value="5">
      <select class="custom-select prodsize" productid="5" name="productattrsize">
        <option value="">Select</option>
        <option value="Green" required="">Green</option>
        <option value="Black" required="">Black</option>
        <option value="Blue" required="">Blue</option>
      </select>
      <div class="d-flex align-items-center justify-content-between pt-3">
        <div class="d-flex flex-row">
          <!-- Product price-->                                                  
          <del>
            <p class="lead text-muted text-decoration-line-through" id="showattrprice">sh 300</p>
          </del>
          <p class="lead text-muted text-decoration-line-through ml-3" id="showcalculatedattrprice" style="float-right">sh 270</p>
        </div>
      </div>
      <div class="d-flex ">
        <a href="http://djvoskill/merchadise/merchadise-2-with-attributes/5" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
        <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart0">Add to Cart</a>
        <div id="successmsg0" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
      </div>
    </div>
  </div>
</div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
  <img class="card-img-top" src="http://djvoskill/images/productimages/small/Product 1 with No Attributes-667.PNG">
  <div class="card-body">
    <h6 class="font-weight-bold pt-1">4.d.Merchadise 1 with Attributes</h6>
    <div class="d-flex align-content-center justify-content-center">
      <span class="pt-1">Tshirts</span>
    </div>
    1.<span class="pt-1">leather</span>
    <hr>
    2.<span class="pt-1">casual</span>
    <div class="fs-sm mb-4">
      <input name="quantity" type="number" value="1" class="prod_qty">
      <input class="prod_id1" name="product_id" type="hidden" value="4">
      <select class="custom-select prodsize" productid="4" name="productattrsize">
        <option value="">Select</option>
        <option value="Small" required="">Small</option>
        <option value="Medium" required="">Medium</option>
      </select>
      <div class="d-flex align-items-center justify-content-between pt-3">
        <div class="d-flex flex-row">
          <!-- Product price-->
          <del>
            <p class="lead text-muted text-decoration-line-through" id="showattrprice">sh 200</p>
          </del>
          <p class="lead text-muted text-decoration-line-through ml-3" id="showcalculatedattrprice" style="float-right">sh 180</p>
        </div>
      </div>
      <div class="d-flex ">
        <a href="http://djvoskill/merchadise/dmerchadise-1-with-attributes/4" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
        <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart1">Add to Cart</a>
        <div id="successmsg1" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
      </div>
    </div>
  </div>
</div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
  <img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 NoAttributes-7262.jpg">
  <div class="card-body">
    <h6 class="font-weight-bold pt-1">3.c.Merchadise 2 NoAttributes</h6>
    <div class="d-flex align-content-center justify-content-center">
      <span class="pt-1">Tshirts</span>
    </div>
    1.<span class="pt-1">woolen</span>
    <hr>
    2.<span class="pt-1">casual</span>
    <div class="fs-sm mb-4">
      <input name="quantity" type="number" value="1" class="prod_qty">
      <input class="prod_id2" name="product_id" type="hidden" value="3">
      <input class="prodsize" name="productattrsize" type="text" value="small">
      <div class="d-flex align-items-center justify-content-between pt-3">
        <div class="d-flex flex-row">
          <!-- Product price-->
          <del>
            <p class="lead text-muted text-decoration-line-through">sh 301</p>
          </del>
          <p class="lead text-muted text-decoration-line-through" style="float-right">sh 204.68</p>
        </div>
      </div>
      <div class="d-flex ">
        <a href="http://djvoskill/merchadise/cmerchadise-2-noattributes/3" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
        <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart2">Add to Cart</a>
        <div id="successmsg2" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
      </div>
    </div>
  </div>
</div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
  <img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 2 NoAttributes-2100.jpg">
  <div class="card-body">
    <h6 class="font-weight-bold pt-1">2.b.Merchadise 2 NoAttributes</h6>
    <div class="d-flex align-content-center justify-content-center">
      <span class="pt-1">Tshirts</span>
    </div>
    1.<span class="pt-1">woolen</span>
    <hr>
    2.<span class="pt-1">wedding</span>
    <div class="fs-sm mb-4">
      <input name="quantity" type="number" value="1" class="prod_qty">
      <input class="prod_id3" name="product_id" type="hidden" value="2">
      <input class="prodsize" name="productattrsize" type="text" value="small">
      <div class="d-flex align-items-center justify-content-between pt-3">
        <div class="d-flex flex-row">
          <!-- Product price-->
          <del>
            <p class="lead text-muted text-decoration-line-through">sh 200</p>
          </del>
          <p class="lead text-muted text-decoration-line-through" style="float-right">sh 180</p>
        </div>
      </div>
      <div class="d-flex ">
        <a href="http://djvoskill/merchadise/bmerchadise-2-noattributes/2" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
        <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart3">Add to Cart</a>
        <div id="successmsg3" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
      </div>
    </div>
  </div>
</div>
  </div>
  <div class="col-lg-4 col-md-6 col-sm-10 offset-md-0 offset-sm-1 mb-5" style="border: 2px solid green">
<div class="card">
  <img class="card-img-top" src="http://djvoskill/images/productimages/small/Merchadise 1 Attributes-6135.jpg">
  <div class="card-body">
    <h6 class="font-weight-bold pt-1">1.a.Merchadise 1 NoAttributes</h6>
    <div class="d-flex align-content-center justify-content-center">
      <span class="pt-1">Tshirts</span>
    </div>
    1.<span class="pt-1">cotton</span>
    <hr>
    2.<span class="pt-1">wedding</span>
    <div class="fs-sm mb-4">
      <input name="quantity" type="number" value="1" class="prod_qty">
      <input class="prod_id4" name="product_id" type="hidden" value="1">
      <input class="prodsize" name="productattrsize" type="text" value="small">
      <div class="d-flex align-items-center justify-content-between pt-3">
        <div class="d-flex flex-row">
          <!-- Product price-->
          <del>
            <p class="lead text-muted text-decoration-line-through">sh 1</p>
          </del>
          <p class="lead text-muted text-decoration-line-through" style="float-right">sh 0.9</p>
        </div>
      </div>
      <div class="d-flex ">
        <a href="http://djvoskill/merchadise/amerchadise-1-noattributes/1" class="p-3 bg-dark text-white btn btn-primary ml-2">View Product</a>
        <a class="p-3 bg-dark text-white btn btn-primary ml-2 add-to-cart4">Add to Cart</a>
        <div id="successmsg4" class="alert alert-message bg-grey text-dark" style="display: none;"></div>
      </div>
    </div>
  </div>
</div>
  </div>
</div>

如果您省略由 laravel 模板生成的編號類（例如add-to-cart0，add-to-cart1...）并簡單地使用通用類名（例如：），您可以讓自己的生活更加輕松add-to-class。使用 CSS 選擇器（例如.add-to-class代替[class*=add-to-class].

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/491936.html

標籤：jQuery 阿贾克斯拉拉维尔

上一篇：我無法從jQueryAjax請求中獲取PHP中的PUT資料

下一篇：.netCore發送xlsx檔案作為Ajax請求的回應