美文网首页web挖坑之路
原生js购物车模拟

原生js购物车模拟

作者: 不知道取个什么昵称不如娶个媳妇 | 来源:发表于2018-09-01 16:20 被阅读8次

    这里不知道怎么陈述,直接上代码

    自己封装了一个外部js函数,其功能如jQuery的$(),但是功能没有人家的强DA,名称是is_selector.js;代码如下

    function $(selector){

    if(selector.charAt(0) === "#"){

    return document.getElementById(selector.slice(1));

    }

    if(selector.charAt(0) === "."){

    if(document.getElementsByClassName === undefined){

    var allele = document.getElementsByTagName("*");

    for(var i = 0 ; i < allele.length ; i++){

    if(allele[i].getAttribute("class") === selector.slice(1)){

    return allele[i];

    } } } else{

    return document.getElementsByClassName(selector.slice(1));

    } }

    return document.getElementsByTagName(selector);

    }

    html代码如下:

    恩,张远老哥,你以后有钱了可千万别打我啊,emmm

    css如下

        table,

            td {

                border-collapse: collapse;

                border: 1px red solid;

                width: 800px;

                margin: 0px auto;

                text-align: center;

            }

            td {

                width: 200px;

            }

            span {

                text-align: center;

                padding: 5px;

            }

            .shop {

                box-sizing: border-box;

                padding: 5px;

                margin: 0 auto;

                width: 500px;

                height: 80px;

                display: flex;

                justify-content: space-between;

                align-content: center;

                border-top: 1px solid #eee;

            }

            .shop .add-cart {

                height: 50px !important;

            }

    js代码

        function del_fun() {

            var del_ = $(".del");

            var len = del_.length;

            for (var i = 0; i < len; i++) {

                del_[i].onclick = function () {

                    var tr_ = this.parentNode.parentNode;

                    tr_.parentNode.removeChild(tr_);

                }

            }

        }

        function addnum_fun() {

            var btn_ = $(".btn-add");

            var len = btn_.length;

            for (var i = 0; i < len; i++) {

                btn_[i].onclick = function () {

                    var bor = this.previousSibling.previousSibling;

                    var sum = (++bor.innerText);

                    var price_ = this.parentNode.previousSibling.previousSibling;

                    var all_price = this.parentNode.nextSibling.nextSibling;

                    all_price.innerText = Number(price_.innerText * sum).toFixed(3);

                }

            }

        }

        function subnum_fun() {

            var btn_ = $(".btn-sub");

            var len = btn_.length;

            for (var i = 0; i < len; i++) {

                btn_[i].onclick = function () {

                    var bor = this.nextSibling.nextSibling;

                    var price_ = this.parentNode.previousSibling.previousSibling;

                    var all_price = this.parentNode.nextSibling.nextSibling;

                    console.log(bor);

                    var sub = --bor.innerText;

                    if (sub <= 0) {

                        bor.innerText = 1;

                        sub = 1;

                    }

                    all_price.innerText = Number(price_.innerText * sub).toFixed(3);

                }

            }

        }

      function main(){

            del_fun();

            addnum_fun();

            subnum_fun();

      }

      main();

    结果图:

    结果,我觉得会被张远老哥打死

    相关文章

      网友评论

        本文标题:原生js购物车模拟

        本文链接:https://www.haomeiwen.com/subject/oqjuwftx.html