购物车商品计算JavaScript实现

素颜马尾好姑娘i 2022-05-27 12:36 245阅读 0赞

**html代码**

<div>
        <p>单价:<span>30</span></p>
        <input type="button" value="-" class="sub">
        <input type="text" value="1">
        <input type="button" value="+" class="add">
        <p>总价:<span>30</span></p>
    </div>
    <div>
        <p>单价:<span>666</span></p>
        <input type="button" value="-" class="sub">
        <input type="text" value="1">
        <input type="button" value="+" class="add">
        <p>总价:<span>666</span></p>
    </div>
    <div>
        <p>单价:<span>888</span></p>
        <input type="button" value="-" class="sub">
        <input type="text" value="1">
        <input type="button" value="+" class="add">
        <p>总价:<span>888</span></p>
    </div>

**JS代码**

var aAdd = document.querySelectorAll(".add");
        var sub = document.querySelectorAll(".sub");
        for (var i = 0; i < aAdd.length; i++) {
            aAdd[i].onclick = function () {
                var num = Number(this.previousElementSibling.value);
                num++;
                this.previousElementSibling.value = num;
                var price = this.previousElementSibling.previousElementSibling.previousElementSibling.firstElementChild.innerHTML;
                this.nextElementSibling.firstElementChild.innerHTML = price * num;
            }
        }
        for (var i = 0; i < sub.length; i++) {
            sub[i].onclick = function () {
                var num = Number(this.nextElementSibling.value);
                num--;
                this.nextElementSibling.value = num;
                var price = this.previousElementSibling.firstElementChild.innerHTML;
                this.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild.innerHTML = price * num;
            }
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，245人围观）

还没有评论，来说两句吧...

相关阅读

相关删除当当购物车商品javascript 当当购物车 js实战简易javascript项目 js作业

废话不多说，直接上代码。 CSS文件：cartStyle.css body,ul,li,div,p,h1,h2,ol{margin:0;padding: 0;}

╰+哭是因爲堅強的太久メ/ 2024年03月30日 09:32/ 0 赞/ 75 阅读

相关实现网页购物车功能，完成基本的商品价格计算等功能

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

系统管理员/ 2023年02月10日 05:20/ 0 赞/ 101 阅读

相关 redis+springboot实现购物车+商品数据修改实例

文章目录配置：实体层控制层商品控制层：购物车控制层：实

叁歲伎倆/ 2022年09月11日 03:19/ 0 赞/ 223 阅读

相关购物车商品计算JavaScript实现

html代码 <div> <p>单价:<span>30</span></p> <input type="button" value="

素颜马尾好姑娘i/ 2022年05月27日 12:36/ 0 赞/ 246 阅读

相关购物车分店铺，全选，店铺全选，计算，增加商品，APP购物车，类似淘宝购物车

基于vue <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

不念不忘少年蓝@/ 2022年05月26日 13:39/ 0 赞/ 231 阅读

相关 JavaScript实现购物车

![70][] ![70 1][] <!DOCTYPE html> <html lang="en"> <head> <meta charse

男娘i/ 2022年05月19日 00:22/ 0 赞/ 340 阅读

相关购物车实现

[https://note.youdao.com/share/?id=fdc2f7f71349a5c38434d2802faa6552&type=note\/][https_n

绝地灬酷狼/ 2022年05月08日 06:38/ 0 赞/ 385 阅读

相关 javascript购物车

购物车 <style type="text/css"> body,html{ background-color: whitesmok

快来打我*/ 2022年01月23日 13:53/ 0 赞/ 389 阅读

相关 Javascript实现购物车案例--Javascript学习

JavaScript实现购物车来进行设计一个购物车的功能 html代码： <!DOCTYPE html> <html> <head>

た入场券/ 2022年01月21日 11:33/ 0 赞/ 770 阅读

相关购物车商品结算（Vue）

一、在商城系统中，购物车结算是必备的一个环节。以下代码（参考17素材网）用于模拟购物车商品结算，仅供参考。二、项目目录介绍 > 1、products.json 用

落日映苍穹つ/ 2021年09月15日 11:50/ 0 赞/ 482 阅读