javascript - 如何使用 jquery append 函数增加产品数量
问题描述
let qnty = 1;
// adding quantity
function addQuantity(id) {
qnty++;
$(`#product${id}p`).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${productId}p" 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
解决方案
您可以this
在函数内部传递,其中this
引用当前 div,然后使用它$(el).siblings(".value").html()
来获取被点击的.value
div 附近的 div 值,然后从总计中加 1或减 1,然后使用为您的 div 分配新值.html()
演示代码:
//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${productId}p" 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>
推荐阅读
- node.js - npm run build 生成错误的资源 URL
- html - 我得到这个 werkzeug.exceptions.BadRequestKeyError
- python - 我们可以在列表中传递函数吗?
- javascript - jquery 的 .removeclass 删除类但不删除类属性
- maven - 了解 Maven 插件的目的
- c# - Unity Speech Recognition C# dictionary problem
- java - Hibernate 不在一张表中存储对象
- angular - PrimeNG 自动完成下拉切换无法按预期工作
- python - 根据“如果单元格中的字符串”条件删除熊猫列中的行
- http - 如何确保 repo 的 SSH 和 HTTPS-url 引用相同的 git 存储库