今天写了一个左右移动 但是发现自己写的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 456px; 19 overflow: hidden; 20 margin: 20px auto; 21 } 22 .zuoList, 23 .youList { 24 200px; 25 height: 300px; 26 border: 1px solid #ccc; 27 float: left; 28 overflow-y: auto; 29 } 30 31 .zhongMi { 32 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;
});