新建分類菜單追加添加與重命名修改提交

點擊添加時,顯示文本框添加名稱,確認提交數據,取消隱藏文本框。點擊編輯顯示文本框輸出名稱,提交后修改完成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="lxr-pzLeft">
                    <div class="lxr-tit">
                        聯系人分類
                        <a href="javascript:;" class="lxr-add">新建分類</a>
                    </div>

                    <div class="pz-addLine">
                        <input type="text" class="layui-input" id="fl_name" placeholder="新分類名稱"/>
                        <a href="javascript:;" class="pz-gb"></a>
                        <a href="javascript:;" class="pz-qr"></a>
                    </div>
                    <!--列表-->
                    <div class="pz-con">
                        <ul class="pzfl-list">
                            <li>
                                <span>服務對象服務對象服務對象</span>
                                <a href="javascript:;" class="fl-del" title="刪除"></a>
                                <a href="javascript:;" class="fl-xg" title="修改"></a>
                            </li>
                            <li>
                                <span>志愿者</span>
                                <a href="javascript:;" class="fl-del" title="刪除"></a>
                                <a href="javascript:;" class="fl-xg" title="修改"></a>
                            </li>
                        </ul>

                    </div>
                </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 //分類選擇
    $(".pzfl-list").on('click'," li",function () {
      $(this).addClass("on").siblings().removeClass("on");
    });

    //新建分類
    $(".lxr-add").click(function () {
      $(".pz-addLine").show();
      $(".pz-con").addClass("pz2");
    });
    $(".pz-gb").click(function () {
      $(this).parents(".pz-addLine").hide();
        $(this).siblings("input").val("");
    });

  //修改
  $(".pzfl-list").on('click','.fl-xg',function() {
      var fl = $(this).siblings("span").html();
      $(this).parents("li").addClass("cn");
      $(".pz-addLine").addClass("cn").show().find("input").val(fl);
      preventBubble();
  });


  $(".pz-addLine").on('click','.pz-qr',function(){
      var flname = $(this).siblings("input").val();

     if($(".pz-addLine").hasClass("cn")){
         $(".pzfl-list").find("li.cn").find("span").text(flname);
         $(".pz-addLine").removeClass("cn");
         $(".pzfl-list").find("li").removeClass("cn");
       $(".pz-addLine").hide().find("input").val("");
     }
     else {
         if(flname == "") {
             layer.tips('不能為空!', '#fl_name',{
                 tips: [4, '#4796fa']
             });
         }
         else {
             $(".pzfl-list").append("<li>" + "<span>" + flname + "</span>" + " <a href="javascript:;" class="fl-del" title="刪除"></a>\n" +
                 "                                <a href="javascript:;" class="fl-xg" title="修改"></a></li>");
             $(this).parents(".pz-addLine").hide();
             $(this).siblings("input").val("");
         }
     }
  });

未經允許不得轉載:小網站 » 新建分類菜單追加添加與重命名修改提交

贊 (0)

評論 0

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
丧尸之战2丧尸来袭电影
内蒙古时时计划 急速赛车玩法技巧 昨晚开什么特马结果 河南快3走势图一定牛 陕西快乐十分最牛的走势图 重庆时时彩存在改码吗 江苏时时走势 快三固定单双公式规律 湖北快三今天 网赌输了报警后果 中国体彩排列5走势 t35cc天空彩票与你同行 重庆欢乐生肖彩票开奖结果 重庆福彩幸运农场走势图表 广东快乐十分开奖结果带线 白小姐中特