jQuery的几个功能实现

最新推荐文章于 2021-02-27 14:53:31 发布

黑马程序员xlj

最新推荐文章于 2021-02-27 14:53:31 发布

阅读量110

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_42236548/article/details/113773089

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery的几个功能实现

1.tab切换

<html>
  <head>
    <title>逗你玩啊</title>
    <style>
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .clearfix {
        *zoom: 1;
        *clear: both;
      }
      .clearfix:before,
      .clearfix:after {
        display: table;
        clear: both;
        content: "";
      }
      #cnt {
        width: 402px;
        height: 200px;
        margin: 100px auto;
        border: 1px solid #000;
      }
      #nav li {
        float: left;
        width: 25%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        border-bottom: 1px solid #000;
        background-color: #000;
      }
      #nav .item-active {
        color: #000;
        background-color: #fff;
      }
      #detail {
        padding-top: 50px;
        text-align: center;
      }
      #detail li {
        display: none;
      }
      #detail .hide {
        display: none;
      }
      #detail .show {
        display: block;
      }
    </style>
  </head>

  <body>
    <div id="cnt">
      <ul id="nav" class="clearfix">
        <li class="item-active">哈哈</li>
        <li>嘿嘿</li>
        <li>嘻嘻</li>
        <li>呵呵</li>
      </ul>

      <ul id="detail">
        <li class="show">哈哈哈哈哈哈哈哈(*^▽^*)</li>
        <li>嘿嘿嘿嘿嘿嘿嘿嘿^_^</li>
        <li>嘻嘻嘻嘻嘻嘻嘻嘻(#^.^#)</li>
        <li>呵呵呵呵呵呵呵呵o(*￣︶￣*)o</li>
      </ul>
    </div>

    <script>
      var nav = document.querySelector("#nav");
      var navItems = document.querySelectorAll("#nav>li");
      var detail = document.querySelectorAll("#detail li");

      var navIndex = 0;
      nav.addEventListener("click", function (e) {
        if (e.target.tagName.toUpperCase() === "LI") {
          e.currentTarget.children[navIndex].className = "";
          detail[navIndex].className = "hide";
          navIndex = [].indexOf.call(e.currentTarget.children, e.target);
          e.target.className = "item-active";
          detail[navIndex].className = "show";
        }
      });
    </script>
  </body>
</html>

2.点击按钮查询账单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单列表</title>
    <style>
        ul li {
            list-style: none;
        }

        #orderList {
            width: 315px;
            display: grid;
            grid-template-columns: repeat(auto-fill, 312px);
            grid-row-gap: 20px;
        }

        #orderList li {
            height: 145px;
            padding: 5px;
            background-color: #fff;
            box-shadow: 4px 5px 10px 0 rgba(198, 201, 203, .35);
        }

        .red {
            color: red;
        }

        .orange {
            color: orange;
        }

        .green {
            color: green;
        }
    </style>
</head>

<body>
<button>获取订单</button>
<ul id="orderList"></ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="handlebars.min-v4.7.6.js"></script>
<script type="text/x-handlebars-template" id="getOrderList">
    {{#each this}}
            <li>
                <p data-number="{{orderNo}}">订单编号：{{orderNo}}</p>
                <p class="{{payColor orderStatus}}" data-status="{{orderStatus}}">支付状态：{{judgeState orderStatus}}</p>
                <p>产品名称：{{productName}}</p>
            </li>
    {{/each}}
</script>
<script>
    /**
     *
     */
    let pay = {
        paying: {payStatus: '支付中', payColor: 'red'},
        waitPay: {payStatus: '待支付', payColor: 'orange'},
        payed: {payStatus: '已支付', payColor: 'green'}
    }

    Handlebars.registerHelper('judgeState', function (val, options) {
        return pay[val].payStatus;
    })
    Handlebars.registerHelper('payColor', function (val) {
        console.log(val);
        return pay[val].payColor;
    })

    /**
     * 判断传入的对象是否为空
     * @param {Object} obj 传入获取的数据
     * @return {boolean} 传入对象为空返回true，非空返回false
     *  */
    function isEmpty(obj) {
        if (obj instanceof Object) {
            return $.isEmptyObject(obj);
        }
    }

    getOrderList()

    /**
     * 获取商品列表数据
     * */
    function getOrderList() {
        let btn = $('button');
        btn.on('click', () => {
            btn.prop('disabled', true);
            $('#orderList').empty();
            $.ajax({
                url: 'orderData.json',
                success: function (data) {
                    if (isEmpty(data)) {
                        btn.prop('disabled', false);
                        return;
                    }
                    let orderTemplate = Handlebars.compile($('#getOrderList').html());
                    $('#orderList').append(orderTemplate(data))
                    btn.prop('disabled', false);
                },
                error: function () {
                    alert("数据加载失败！");
                    btn.prop('disabled', false);
                }
            })

        })
    }

    /**
     *点击订单弹出 订单号；若订单状态已支付 不弹出订单号
     */
    $('#orderList').on('click', 'li', function () {
        let exclude = $(this).children('p[data-status]').attr('data-status');
        if (exclude !== 'payed') {
            //console.log($(this).children('p:first-child').text().toString().split('：')[1])
            alert($(this).children('p[data-number]').attr('data-number'));
        }
    })
</script>
</body>

</html>

在这里插入图片描述

黑马程序员xlj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的几个功能实现

jQuery的几个功能实现1.tab切换<html> <head> <title>逗你玩啊</title> <style> ul { list-style: none; margin: 0; padding: 0; } .clearfix { *zoom: 1; *clear: both; }
复制链接

扫一扫

专栏目录