购物车页面的商品加减按钮，并且实时显示

最新推荐文章于 2022-04-14 16:03:14 发布

原创最新推荐文章于 2022-04-14 16:03:14 发布 · 597 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文详细介绍了使用JavaScript和Axios实现购物车商品数量增减功能的方法。通过点击按钮触发商品数量的增加或减少，并实时更新小计价格，同时调用API同步购物车状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jian[i].onclick = function() {
	console.log(this)
	let pid = this.getAttribute('data-id')
	// 找到商品让他减减
	let pjianta = pobj.find(v => v.pid == pid)
	// console.log(pjianta)
	if (pjianta.pnum == 1) {
		alert('最少只有一件哦')
		return
	}
	pjianta.pnum--
	console.log(pobj)
	this.nextElementSibling.value = pjianta.pnum
	// 实时显示
	console.log(Number(pobj[i].pnum) * Number(pobj[i].pprice))
	xiaoji[i].innerHTML = Number(pobj[i].pnum) * Number(pobj[i].pprice)
	let jianAPI = `http://jx.xuzhixiang.top/ap/api/cart-update-num.php`
	axios.get(jianAPI, {
		params: {
			pid,
	uid,
		pnum: pjianta.pnum
	}
}).then(res => {
		console.log(res.data)

	})
	console.log(pobj)
	contPrice(pobj)
}
// 加加------------------------------------------------
plus[i].onclick = function() {
	console.log(this)
	let pid = this.getAttribute('data-id')
	// 找到商品让他jiajia
	let pjiata = pobj.find(v => v.pid == pid)
	// console.log(pjiata)

	pjiata.pnum++
	console.log(pobj)
	this.previousElementSibling.value = pjiata.pnum

	let jiaAPI = `http://jx.xuzhixiang.top/ap/api/cart-update-num.php`
	axios.get(jiaAPI, {
		params: {
			pid,
			uid,
			pnum: pjiata.pnum
		}
	}).then(res => {
		console.log(res.data)

	})
	console.log(pobj)
	contPrice(pobj)

	// 实时显示
	console.log(Number(pobj[i].pnum) * Number(pobj[i].pprice))
	xiaoji[i].innerHTML = Number(pobj[i].pnum) * Number(pobj[i].pprice)
}