左右添加和删除

标签：cli   功能   不能   实现   event   end   checked   ++   window   

自己写的一个网页里面的删除和新增的js。逻辑过于复杂，而且不能实现所有的功能。但是也是自己的一些成果。有借鉴的可以问问我
 //点击的是二级权限
            $(".select").click(function () {
                var m = 0;
                //阻止事件冒泡
                var e = event || window.event;
                if (e.stopPropagation) {
                    e.stopPropagation();
                }
                else {
                    e.cancelBubble = true;
                }
                //冒泡结束
                var l = $(this).parent().parent().find("li input").length;
//                selected2 = $(this).parent().parent().find("li").eq(0)[0];
                for (var i = 0; i < l; i++) {
                    if ($(this).parent().parent().find("li input").eq(i)[0].checked == true) {
                        m++;
                    }
                }
                if (m == l) {
                    $(this).parent().parent().prev().find("input")[0].checked = true;
                } else {
                    $(this).parent().parent().prev().find("input")[0].checked = false;
                }
            })

            //点击的是一级权限
            $(".selectParent").click(function () {
                //阻止事件冒泡
                var e = event || window.event;
                if (e.stopPropagation) {
                    e.stopPropagation();
                }
                else {
                    e.cancelBubble = true;
                }
                if ($(this)[0].checked === true) {
                    isChecked($(this));
                } else {
                    cancelChecked($(this));

                }

            })

            //点击的是Li标签
            $(".selectTr").click(function () {
                var m = 0;
                if ($(this).find("input")[0].checked === false) {
                    $(this).find("input")[0].checked = true;
                } else {
                    $(this).find("input")[0].checked = false;
                }
                var l = $(this).parent().find("li input").length;
                for (var i = 0; i < l; i++) {
                    if ($(this).parent().find("li input").eq(i)[0].checked == true) {
                        m++;
                    }
                }
                if (m == l) {
                    $(this).parent().prev().find("input")[0].checked = true;
                } else {
                    $(this).parent().prev().find("input")[0].checked = false;
                }

            })

            function cancelChecked($dom) {
                var l = $dom.parent().next().find("li input").length;
                for (var i = 0; i < l; i++) {
                    $dom.parent().next().find("li input").eq(i)[0].checked = false;
                }
            }

            function isChecked($dom) {
                abc = $dom.parent().next().find("li");
                var l = $dom.parent().next().find("li input").length;
                for (var i = 0; i < l; i++) {
                    $dom.parent().next().find("li input").eq(i)[0].checked = true;
                }
            }

            $("#add").click(function () {
                addOrDelete($("#ok"));
                //添加到右边
            })


            function addOrDelete($dom) {
                var l = $dom.find(".information").length;
                console.log(l);
                var arr = [];
                //这里有两种情况，第一种当第一级选中的时候直接把父级和子级以及push到arr里面。第二种当父级没选中的时候遍历里面的子级然后push到arr中
                for (var i = 0; i < l; i++) {
                    var tr = [];
                    var trL = $dom.find(".information").eq(i).next().find("li a").length;
                    if ($dom.find(".information").eq(i).find("input")[0].checked == true) {
                        for (var j = 0; j < trL; j++) {
                            tr.push($dom.find(".information").eq(i).next().find("li a").eq(j).html());
                        }
                        arr.push({
                            th: $dom.find(".information").eq(i).html().replace(/<input type="checkbox" class="selectParent">/g, ""),
                            tr: tr
                        });
                        console.log("lianggeyiqi:" + arr);
                        console.log(arr);
                        console.log(99999);
                    } else {
                        for (var j = 0; j < trL; j++) {
                            if ($dom.find(".information").eq(i).next().find("li input").eq(j)[0].checked === true) {
                                tr.push($dom.find(".information").eq(i).next().find("li a").eq(j).html());
                            }
                        }
                        if (tr.length > 0) {
                            arr.push({
                                th: $dom.find(".information").eq(i).html().replace(/<input type="checkbox" class="selectParent">/g, ""),
                                tr: tr
                            });
                        }
                    }
                }
                addToLOR(arr, $dom);
                for (var i = l - 1; i >= 0; i--) {
                    console.log(123456789);
                    var trL = $dom.find(".information").eq(i).next().find("li a").length;
                    if ($dom.find(".information").eq(i).find("input")[0].checked == true) {
                        //移除左边的勾选内容
                        $dom.find("div").eq(i).remove();
                    } else {
                        for (var j = trL - 1; j >= 0; j--) {
                            if ($dom.find(".information").eq(i).next().find("li input").eq(j)[0].checked === true) {
                                $dom.find(".information").eq(i).next().find("li").eq(j).remove();
                            }
                        }
                    }
                }
            }

            //添加到右边或则左边
            function addToLOR(arr, $dom) {
                var str = "";
                var isHava = 0;//0表示没有一样的头。否则有
                var dijige = 0;
                var $other = "";
                if ($dom[0].id == ‘addOrDel‘) {
                    $other = $(‘#ok‘);
                } else {
                    $other = $(‘#addOrDel‘);

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

                    //遍历数组然后查询已经添加的里面有没有一样的头部，如果没有就直接加整个div。不然把添加的内容加到对应的ul里面去。
                    for (var m = 0; m < $other.find("div").length; m++) {
                        console.log($other.find("div").eq(m).find("a:first-child"));
                        if ($other.find("div").eq(m).find("a:first-child").html().replace(/<input type="checkbox" class="selectParent">/g, "") == arr[i].th) {
                            isHava++;
                            dijige = m;
                        }
                    }
                    if (isHava == 0) {
                        str = ‘ <div id="user2"><a class="one information"><input type="checkbox" class="selectParent">‘ + arr[i].th + ‘</a>‘;
                        str += ‘ <ul class="kid">‘;
                        for (var j = 0; j < arr[i].tr.length; j++) {
                            str += ‘                        <li class="selectTr"><b class="tip"></b><input type="checkbox" class="select"><a‘;
                            str += ‘                                    target="Conframe"‘;
                            str += ‘                                    href="html/UserCostinfo.html"‘;
                            str += ‘                                    class="select">‘ + arr[i].tr[j] + ‘</a></li>‘;
                        }
                        str += ‘                    </ul>‘;
                        str += ‘                </div>‘;
                        console.log(str);
                        $other.append(str);
                    } else {
                        console.log(arr[i].tr);
                        console.log("changdu:" + arr[i].tr.length);
                        for (var j = 0; j < arr[i].tr.length; j++) {
                            str += ‘                        <li class="selectTr"><b class="tip"></b><input type="checkbox" class="select"><a‘;
                            str += ‘                                    target="Conframe"‘;
                            str += ‘                                    href="html/UserCostinfo.html"‘;
                            str += ‘                                    class="select">‘ + arr[i].tr[j] + ‘</a></li>‘;
                        }
                        console.log(str);
                        $other.find("div ul").eq(dijige).append(str);
                    }
                }

                //点击的是二级权限
                $(".select").click(function () {
                    var m = 0;
                    //阻止事件冒泡
                    var e = event || window.event;
                    if (e.stopPropagation) {
                        e.stopPropagation();
                    }
                    else {
                        e.cancelBubble = true;
                    }
                    //冒泡结束
                    var l = $(this).parent().parent().find("li input").length;
//                selected2 = $(this).parent().parent().find("li").eq(0)[0];
                    for (var i = 0; i < l; i++) {
                        if ($(this).parent().parent().find("li input").eq(i)[0].checked == true) {
                            m++;
                        }
                    }
                    if (m == l) {
                        $(this).parent().parent().prev().find("input")[0].checked = true;
                    } else {
                        $(this).parent().parent().prev().find("input")[0].checked = false;
                    }
                })

                //点击的是一级权限
                $(".selectParent").click(function () {
                    //阻止事件冒泡
                    var e = event || window.event;
                    if (e.stopPropagation) {
                        e.stopPropagation();
                    }
                    else {
                        e.cancelBubble = true;
                    }
                    if ($(this)[0].checked === true) {
                        isChecked($(this));
                    } else {
                        cancelChecked($(this));

                    }

                })

                //点击的是Li标签
                $(".selectTr").click(function () {
                    var m = 0;
                    if ($(this).find("input")[0].checked === false) {
                        $(this).find("input")[0].checked = true;
                    } else {
                        $(this).find("input")[0].checked = false;
                    }
                    var l = $(this).parent().find("li input").length;
                    for (var i = 0; i < l; i++) {
                        if ($(this).parent().find("li input").eq(i)[0].checked == true) {
                            m++;
                        }
                    }
                    if (m == l) {
                        $(this).parent().prev().find("input")[0].checked = true;
                    } else {
                        $(this).parent().prev().find("input")[0].checked = false;
                    }

                })

                function cancelChecked($dom) {
                    var l = $dom.parent().next().find("li input").length;
                    for (var i = 0; i < l; i++) {
                        $dom.parent().next().find("li input").eq(i)[0].checked = false;
                    }
                }

                function isChecked($dom) {
                    abc = $dom.parent().next().find("li");
                    var l = $dom.parent().next().find("li input").length;
                    for (var i = 0; i < l; i++) {
                        $dom.parent().next().find("li input").eq(i)[0].checked = true;
                    }
                }

            }


//            这里做的是删除刚刚添加的不必要的选项
            $("#cancel").click(function () {
                addOrDelete($(‘#addOrDel‘));
            })

        })

左右添加和删除

标签：cli   功能   不能   实现   event   end   checked   ++   window   

原文地址：http://www.cnblogs.com/dragonh/p/6285735.html