如何使用 jquery append 函数增加产品数量

Posted 2023-05-09

【中文标题】如何使用 jquery append 函数增加产品数量

【英文标题】：how to increment product quantity with jquery append function

【发布时间】：2021-06-17 14:44:19

【问题描述】：

let qnty = 1;

// adding quantity
function addQuantity(id) 
  qnty++;
  $(`#product$idp`).html(qnty)
  console.log('add', id)


// remove quantity
function removeQuantity(id) 
  qnty--;
  $(`#product$id.value`).html(qnty)
  console.log('remove', id)


//fetching data from api
function getProductsByWholeSellerId(id) 
  $.get('https://netco-indo-test.nfrnds.net:20003/fmcg-dd/catlog?whsId=' + `$id`, (response, status) => 
    let productArray = response.products
    let categoryArray = response.categories;
    let categoryName1 = "";

    function getCategoryById(response, id) 
      let data = response.filter(
        category => category.productCategoryId === id
      )
      return data[0].categoryName
    
    productArray.forEach(product => 
      // console.log(product)
      let brandName = product.brandName;
      let productName = product.productName;
      let categoryid = product.categoryId;
      let categoryName = getCategoryById(categoryArray, categoryid)
      let productId = product.productId
      let quantity = 1
      let image = `https://res.cloudinary.com/nfrnds/image/upload/fmcgdd` + product.smallImgUrl;
      let object = 
        productName: productName,
        productId: productId,
        quantity: 1,
        categoryName: categoryName,
        categoryId: categoryid,
        productImg: image,
        price: 0
      

      // console.log(object)
      if (product.smallImgUrl !== null && product.smallImgUrl !== "") 

        //Using productTag variable that contains html content for creating product card 
        let productTag =`
<div class="product-container">
  <div class="product-card">
    <div class="product-image"><img src="$image"></div>
    <div class="content">
      <div class="name"><h3>$productName</h3></div>
      <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. </div>
      <div class="price">Price: <b>100<b> $</div>
      <div class="quatity">
        <div id="product$productId" onclick="removeQuantity(this.id)" class="plus">-</div>
        <div id="product$productIdp" class="value">1</div>
        <div id="product$productId" onclick="addQuantity(this.id)" class="minus">+</div>
      </div>
    </div>
    <button>Add To Cart</button>
  </div>
</div>`;
        $('ul').append(productTag)
      
    )
  )


getProductsByWholeSellerId(30972)
// the "quatity" class contains elements to increase and decrease product quantity by calling a function ,the function is called not changing the value of the quantity

【参考方案1】：

您可以在您的函数中传递this，其中this 指的是被点击的当前div，然后使用$(el).siblings(".value").html() 来获取被点击的div 附近的.value div 的值，然后添加1 或 从总数中减去 1 然后使用 .html() 为您的 div 分配新值

演示代码：

//just for demo...supoose data look like this :)
var response = 
  "products": [
    "brandName": "A",
    "productName": "Somethings",
    "categoryId": "1",
    "productId": "1",
    "smallImgUrl": "something.png"
  , 
    "brandName": "B",
    "productName": "2 Somethings",
    "categoryId": "2",
    "productId": "2",
    "smallImgUrl": "something.png"
  ]


function addQuantity(el) 
//get value  div and change value there
$(el).siblings(".value").html(parseInt($(el).siblings(".value").html()) + 1)


function removeQuantity(el) 
//get value  div and change value there
$(el).siblings(".value").html(parseInt($(el).siblings(".value").html()) - 1)


function getProductsByWholeSellerId(id) 

  /*  $.get('https://netco-indo-test.nfrnds.net:20003/fmcg-dd/catlog?whsId=' + `$id`, (response, status) => 

      let categoryArray = response.categories;
      let categoryName1 = "";


      function getCategoryById(response, id) 


        let data = response.filter(

          category => category.productCategoryId === id

        )

        return data[0].categoryName
      */

  let productArray = response.products
  productArray.forEach(product => 

    // console.log(product)

    let brandName = product.brandName;
    let productName = product.productName;
    let categoryid = product.categoryId;
    let categoryName = "somehtings " /*getCategoryById(categoryArray, categoryid)*/
    let productId = product.productId
    let quantity = 1
    let image = `https://res.cloudinary.com/nfrnds/image/upload/fmcgdd` + product.smallImgUrl;


    let object = 
      productName: productName,
      productId: productId,
      quantity: 1,
      categoryName: categoryName,
      categoryId: categoryid,
      productImg: image,
      price: 0
    
    if (product.smallImgUrl !== null && product.smallImgUrl !== "") 
    //pass `this` inside function..where its refer to div which is clicked
      let productTag =

        `<div class="product-container">
                    <div class="product-card">

                        <div class="product-image"><img src="$image"></div>

                        <div class="content">
                            <div class="name"><h3>$productName</h3></div>
                            <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. </div>
                            <div class="price">Price: <b>100<b> $</div>

                            <div class="quatity">
                                <div id="product$productId" onclick="removeQuantity(this)" class="plus">-</div>
                                <div id="product$productIdp" class="value">1</div>
                                <div id="product$productId" onclick="addQuantity(this)" class="minus">+</div>
                            </div>
                        </div>
                        <button>Add To Cart</button>
                    </div>
                </div>`


      $('ul').append(productTag)
    

  )

  /*)*/



getProductsByWholeSellerId(30972)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
</ul>

【参考方案2】：

用户可以试试这个

<div class="quatity">
       <div id="product$productId" onclick="removeQuantity($productId)" class="plus"</div>
       <div id="product$productIdp" class="value">1</div>
       <div id="product$productId" onclick="addQuantity($productId)" class="minus">+</div>
    </div>

$(#product$id.value).html(qnty) 应该是错的

$(#product$idp).html(qnty)