实战：点击查看详情

缺乏、安全感 2022-04-24 08:48 190阅读 0赞

# [实战：点击查看详情][Link 1] #

**简单描述需求**：

*  1、顶部四个按钮代表功能，按下其中一个按钮，区域1列出这个功能的子模块；按下另一个按钮，这块区域显示的又是另一个功能的子模块（**table1**内容切换）。

注：按下按钮的之后显示区域1的内容，同时会清空区域2 的内容。

*  2、点击table1中的其中一条子模块，区域2列出这个子模块的详细信息，点击另一条子模块（**table2**内容切换）。

![1261071-20180831202028441-1967891112.png][] ![1261071-20180831213401453-912031913.png][]

## 尝试一： ##

**1、思路：**

*  区域1有四个div，各自装有四个功能要显示的 功能列表（ul>li）；
 *  点击功能1时显示div1，其余三个div被隐藏，通过show()和hide() 方法来控制区域1 显示不同功能的子模块列表。
 *  点击列表内的模块时，区域2显示不同的table，1、2、 3 、 4......（好像会很多）

**2、失败原因：**

当有四个功能时，可以通过四个div的显示和隐藏来切换 “区域1” 的内容；但是同样的方法，通过点击功能列表在 “区域2” 显示子模块的详情时，若是有很多很多个子模块，岂不是需要无数个div来切换显示，所以这个方法行不通；

**3、代码：**

![复制代码][copycode.gif]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <link rel="stylesheet" href="assets/bootstrap-4.1.3-dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/style.css">
        <script src="assets/jQuery/jquery-3.2.1.min.js"></script>
        <script src="assets/main.js"></script>
    </head>
    <body>
    
    <div class="container">
        <div class="row">
            <div class="col-3 box1" id="divbox1">功能1</div>
            <div class="col-3 box1" id="divbox2">功能2</div>
            <div class="col-3 box1" id="divbox3">功能3</div>
            <div class="col-3 box1" id="divbox4">功能4</div>
        </div>
        
        
        <div>
        
            <div class="content-one">
                <ul class="list-group"></ul>
                
                <table class="table table-striped table-bordered table-hover" id="table1">
                   <tr>
                      <th>key</th>
                      <th>value</th>
                   </tr>
                    <tbody id="mytab1"></tbody>
                </table>
            </div>
            
            <div class="content-two">
                <ul class="list-group"></ul>
                <table class="table table-striped table-bordered table-hover" id="table2">
                   <tr>
                      <th>key</th>
                      <th>value</th>
                   </tr>
                    <tbody id="mytab2"></tbody>
                </table>
            </div>
            
            <div class="content-three">
                <ul class="list-group"></ul>
                <table class="table table-striped table-bordered table-hover" id="table3">
                   <tr>
                      <th>key</th>
                      <th>value</th>
                   </tr>
                    <tbody id="mytab3"></tbody>
                </table>
            </div>
            
            <div class="content-four">
                <ul class="list-group"></ul>
                <table class="table table-striped table-bordered table-hover" id="table4">
                   <tr>
                      <th>key</th>
                      <th>value</th>
                   </tr>
                    <tbody id="mytab4"></tbody>
                </table>
            </div>
        </div>
    </div>
    </body>
    </html>

![复制代码][copycode.gif]

//main.js代码：
    $(function() {
        var test1 = 1;
        var test2 = 1;
        var test3 = 1;
        var test4 = 1;
    
        var anArray1 = [ 'one', 'two', 'three' ];
        var anArray2 = [ '功能1', '功能2', '功能3' ];
        var anArray3 = [ '设备1', '设备2', '设备3' ];
        
        var detail1 = " [ {name:'6101',value:'北京市'}, {name:'6102',value:'天津市'}, {name:'6103',value:'上海市'}]";
        var detailObj1 = eval("(" + detail1 + ")"); // 转换为json对象 
    
        var detail2 = " [ {name:'注册用户',value:'32'}, {name:'在线用户',value:'13'}, {name:'VIP用户',value:'10'}]";
        var detailObj2 = eval("(" + detail2 + ")");
    
        var detail3 = " [ {name:'性能',value:'良好'}, {name:'反应速度',value:'快'}, {name:'品牌',value:'华为'}]";
        var detailObj3 = eval("(" + detail3 + ")");
        
    //下面有隐藏和删除两种尝试，都只以div1为例子，还要copy出div2、3、4
    //尝试1
        $("#divbox1").click(function(e) {
                $("#table1").hide();
                var str1 = '<li class="list-group-item list1">'
                var str2 = '</li>';
                if (test1 == 1) {
                    // 遍历数组 anArray
                    for (i in anArray1) {
                        $(".content-one ul").append(str1 + anArray1[i] + str2);
                    }
                    // 遍历data对象，插入到table内部
                    var $tab1 = $("#mytab1");
                    for (i = 0; i < detailObj1.length; i++) {
                        $tab1.append("<tr>");
                        $.each(detailObj1[i],function(j, val) {
                                    $("#mytab1").append("<td>" + val + "</td>");
                                });
                        $tab1.append("</tr>");
                    }
                }
                test1 = 2;
                if (test1 == 2) {
                    $(".content-one").show();
                    $(".content-one").siblings("div").hide();
                }
                // 展示table详情
                $(".list2").click(function() {
                    $("#table2").show();
                });
                $(".list2").dblclick(function() {
                    $(".content-two").hide();
                });            
            });
            
    //尝试2
            $(".box2").click(function(e) {    
                var aaa = e.target.innerHTML;
                var bbb = getfunc(aaa);
                $(".list1,.list3,.list4").remove();//除了自己，其他所有li标签都删除
                test1 = 1;//恢复其他divbox可以点击
        
                var str1 = '<li class="list-group-item list2">'
                var str2 = '</li>';
                if (test2 == 1) {
                    // 遍历数组 anArray
                    for (i in bbb) {
                        $(".content-one ul").append(str1 + bbb[i] + str2);
                    }
                }
                test2 = 2;
                $(".list-group-item").click(function(e){
                    var aaa1 = e.target.innerHTML;
                    var bbb1 = getfunc(aaa1);
                    console.log(bbb1);
                    var $tab1 = $("#mytab1");
                    if(test2 == 2){
                        for (i in bbb1) {
    //                        alert(bbb1[i]);
                            $tab1.append("<tr class='list1'>");
                            $("#mytab1").append("<td class='list2'>" + bbb1[i] + "</td>");
                            $tab1.append("</tr>");
                        }
                    }
                    test2 = 3;
                    
                });
            });
    })

![复制代码][copycode.gif]

##  ##

## 尝试二： ##

**1、思路：**

*  系统初始化时默认显示区域1中“功能1”的子模块列表，区域2为空（记得隐藏区域2的表头）；
 *  区域1有一个div，点击“按钮1“，div里显示功能1的子模块列表；再次点击“按钮2”时，将区域1和区域2的内容全部清空，再继续加载功能2的列表，以此类推~~~**（先清空，再加载）；**
 *  区域2 也同理，不同的是点击“按钮1”时要清空区域1和区域2再加载，但是点击模块列表时只是清空区域2的内容再重新加载区域2，影响不到区域1；
 *  只需要1个div，通过判断所点击的div的内容（innerHTML）来选择所要加载的哪一个数组~~~

**1、代码：**

![复制代码][copycode.gif]

$(function() {
        var list1 = " [ {name:'1234',value:'北京市'}, {name:'6102',value:'天津市'}, {name:'6103',value:'上海市'}]";
        var listObj1 = eval("(" + list1 + ")"); // 转换为json对象 
    
        var list2 = " [ {name:'性能',value:'良好'}, {name:'反应速度',value:'快'}, {name:'品牌',value:'华为'}]";
        var listObj2 = eval("(" + list2 + ")");
    
    
        var detail1 = " [ {name:'6101',value:'北京市'}, {name:'6102',value:'天津市'}, {name:'6103',value:'上海市'}]";
        var detailObj1 = eval("(" + detail1 + ")"); // 转换为json对象 、
    
        var detail2 = " [ {name:'注册用户',value:'32'}, {name:'在线用户',value:'13'}, {name:'VIP用户',value:'10'}]";
        var detailObj2 = eval("(" + detail2 + ")");
        
    //重点代码（通过判断所点击的div的内容是什么，再来选择所需要加载的是哪一个数组）
        function getChildren(parent){
            if(parent == '功能1'){
                return listObj1;
            }
            else if(parent == '功能2'){
                return listObj2;
            }
            else if(parent == '1234'){
                return detailObj1;
            }
            else if(parent == '性能'){
                return detailObj2;
            }
        }
    //初始化 
        $("#table2 .tableTh").hide();   //初始化隐藏table1的头部
        for (i in listObj1) {
                $.each(listObj1[i], function(j, val) {
                    $("#mytab1").append("<td class='list-item delete'>" + val + "</td>");
                });
                $("#mytab1").append("<tr class='delete'>");
                $("#mytab1").append("</tr>")
            }
        $(".list-item").click(function(e){
            $("#table2 .tableTh").show();  //显示table1的头部
            $(".delTr").remove();  //清空所有class为delete的标签
            var aaa1 = e.target.innerHTML;
            var bbb1 = getChildren(aaa1);
            var $tab2 = $("#mytab2");
    
            for (i in bbb1) {
                $.each(bbb1[i], function(j, val) {
                    $("#mytab2").append("<td class='delete delTr'>" + val + "</td>");
                });
                $tab2.append("<tr class='delete delTr'>");
                $tab2.append("</tr>")
            }    
        });
    //初始化 结束
        $(".box").click(function(e) {
            // this.css('background','#169BD5');
            $("#table2 .tableTh").hide();  //隐藏table1的头部
            $(".delete").remove();//清空所有class为delete的标签
    
            var aaa = e.target.innerHTML;   //aaa是被鼠标点击的div里的值 （功能1）
            var bbb = getChildren(aaa);   //bbb是一个数组，通过判断aaa是哪一个值，来判断bbb是哪一个数组
            // 遍历数组 anArray
            for (i in bbb) {
                $.each(bbb[i], function(j, val) {
                    $("#mytab1").append("<td class='list-item delete'>" + val + "</td>");
                });
                $("#mytab1").append("<tr class='delete'>");
                $("#mytab1").append("</tr>")
            }
            
            $(".list-item").click(function(e){
                $("#table2 .tableTh").show();  //显示table1的头部
                $(".delTr").remove();  //清空所有class为delete的标签
                var aaa1 = e.target.innerHTML;
                var bbb1 = getChildren(aaa1);
                var $tab2 = $("#mytab2");
    
                for (i in bbb1) {
                    $.each(bbb1[i], function(j, val) {
                        $("#mytab2").append("<td class='delete delTr'>" + val + "</td>");
                    });
                    $tab2.append("<tr class='delete delTr'>");
                    $tab2.append("</tr>")
                }    
            });
        });
    })

[Link 1]: https://www.cnblogs.com/luwanying/p/9530274.html
[1261071-20180831202028441-1967891112.png]: https://images2018.cnblogs.com/blog/1261071/201808/1261071-20180831202028441-1967891112.png
[1261071-20180831213401453-912031913.png]: /images/20220217/8b2bf368cfc8471b9b4eb94cb43e0d7d.png
[copycode.gif]: /images/20220217/cc3d65b4d8804791ab34af9c4f69d247.png