jquery 左右移动 以及使用layer.js弹出框呈现在页面上

今天写了一个左右移动 但是发现自己写的css效果一直都加不上去，不管了，还是先上自己有问题的代码，毕竟在失败中发现问题也是一种成长么。
好吧，其实我们都知道在列表有边框里，它的值来源于左边框，那么如果我这样

yidong.click(function(){
        $(this).css("backgroundColor",'#3385ff');//这样的用js写的样式可以加上，相当于行内样式。
      })

yidong.click(function(){
 $(this).addClass('move');})//move在css中的样式就加不上
这样写的效果却加不上。这是为什么呢？ 对于事件建议以后使用事件处理 on bind  ..他们也可以处理在js中写的数据

我记得上一次写hover事件的时候有这样的问题，所以我就记住了，要先择一个没有被js创造的父亲元素 用他来找地下被js或者ajax创建的内容。上代码。

 1扩大范围去找元素

好的，接下来看看完整代码吧 能用css实现的就不用js le

  1 <!doctype html>
  2 <html lang="en">
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title>Document</title>
  7         <script src="jquery.js"></script>
  8     </head>
  9     <style>
 10         * {
 11             margin: 0;
 12             padding: 0;
 13         }
 14         li{
 15             list-style: none;
 16         }
 17         #zuoYou{
 18             width: 456px;
 19             overflow: hidden;
 20             margin: 20px auto;
 21         }
 22         .zuoList,
 23         .youList {
 24             width: 200px;
 25             height: 300px;
 26             border: 1px solid #ccc;
 27             float: left;
 28             overflow-y: auto;
 29         }
 30         
 31         .zhongMi {
 32             width: 50px;
 33             height: 300px;
 34             border: 1px solid #ccc;
 35             float: left;
 36         }
 37         
 38         #zuoYou li{
 39             height: 30px;
 40             line-height: 30px;
 41             border-bottom: 1px dashed #ccc;
 42             cursor: pointer;
 43         }
 44         
 45         #zuoYou li:hover {
 46             background-color: #ccc;
 47         }
 48         #zuoYou li.move{
 49             background-color: #3385ff;
 50         }
 51     </style>
 52 
 53     <body>
 54         <div id="zuoYou">
 55             <div class="zuoList">
 56                 <ul>
 57                     <li>1</li>
 58                     <li>2</li>
 59                     <li>3</li>
 60                     <li>4</li>
 61                     <li>5</li>
 62                 </ul>
 63             </div>
 64             <div class="zhongMi">
 65                 <div class='zuoYi'>左移</div>
 66                 <div class='zuoAll'>左全移</div>
 67                 <div class='youYi'>右移</div>
 68                 <div class='youAll'>右全移</div>
 69             </div>
 70             <div class="youList">
 71                 <ul>
 72                     <li>6</li>
 73                 </ul>
 74             </div>
 75         </div>
 76     </body>
 77     <script>
 78         var zuoYou = $('#zuoYou');
 79         var zuoList = $('.zuoList');
 80         var youList = $('.youList');
 81         var zuoListL = $('.zuoList ul li');
 82         var youListL = $('.youList ul li');
 83         var zuoYi = $('.zuoYi');
 84         var youYi = $(".youYi");
 85         var zuoAll = $('.zuoAll');
 86         var youAll = $(".youAll");
 87 
 88 
 89         //点击左或者右边添加addClass
 90         zuoYou.on('click', 'li', function(){
 91             $(this).toggleClass('move');
 92         })
 93         
 94         //左右移
 95         function yiDong(a, b, c){
 96             a.on('click', function(){
 97                 var move = $(b + ' .move');
 98                 move.appendTo(c).removeClass('move');
 99             })
100         }
101         yiDong(zuoYi, '.youList', zuoList);
102         yiDong(youYi, '.zuoList', youList);
103         
104         //全移
105         function yiAll(a, b, c){
106             a.on('click', function(){
107                 var move = $(b +' li');
108                 move.appendTo(c);
109             })
110         }
111         yiAll(zuoAll, '.youList', zuoList);
112         yiAll(youAll, '.zuoList', youList);
113         
114     </script>
115 
116 </html>
以上的左右移动是通过layer.js弹出框展示的，接下来我要实现的是把右边框中移动的内容展示到页面上
 layer.open({
                type: 1,
                area: ['600px', '500px'], //宽高
                content: $('#zuoYou'),
                title:'选择设备',
                btn: ['确认', '取消'],
                yes: function (index) {
                    //判断相同的值不再追加
                     if($('.youList .youL').length>8){
                         alert('列表高于8条，请重新选择')
                         }
　　　　　　　　　　　　　else{
                        $(".youList .youL").each(function(i){
                             var _this = $(this),
                             youL = _this.text();//右边列表的值
                             $(".tJ .gekai").each(function() {
                            var show = $(this).text();//展示的值
                            if (youL == show) {
                                $(this).remove();
                            }
                        })
                        $(".tJ").append("<dd style='padding-right:0'><div class='gekai'><img src='/Themes/Default/images/no.png'>"+ youL+"</div></dd>");
                        layer.close(index);
                    })
                        }
                   }
             })
      
        })

        //点击图片消失
        $(".tJ").delegate('img', 'click', function () {
            $parent = $(this).parent();
            $parent.remove();
            return false;
        });
posted @ 2017-03-31 13:35  niu2016  阅读(774)  评论(0)  编辑  收藏  举报