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; });转载于:https://www.cnblogs.com/nf1206/p/6650784.html
jquery 左右移动 以及使用layer.js弹出框呈现在页面上相关推荐
- js弹出框，点击切换事件，jQuery改变一部分css样式
文章目录 js,声明变量注意点 js弹出框 js.flag=0的使用 js,隐藏样式 jquery改变css样式 js,声明变量注意点 <script>// 声明多个变量 var age= ...
- js 弹出框 背景不滑动 方案
这是一个系列,记录我前端开发常用的代码,小常识,有些是参考网上代码,(讲的可能有点烂,求不要打脸,嘤嘤嘤~~)送给那些需要的人.可以相互交流,喜欢的加我吧. Wx: Lxp911221 js 弹出框 ...
- php点击文字弹出js提示框,js弹出框、对话框、提示框、弹窗实现方法总结(推荐)...
一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...
- jtable.js 弹出框自适应高度
小编最近遇到一个问题,久久不得其解,jtable.js中的弹出框如何自定义它的高呢?巧遇公司老员工,解决,这过程也让我得到了不少的心得,先告诉你们代码吧 方法就是改变jtable.js的源码 1.在j ...
- 如何妥善处理WebBrowser对Javascript的错误问题，阻止JS弹出框，提高用户体验（原创）...
由于项目需求,最近转战客户端,开始搞浏览器开发.众所周知,现在在微软平台上开发浏览器,最常用的方法就是扩展Webbrowser,但是首先要清楚的是,WebBrowser控件仅仅是对WebBrowser ...
- 原生js 弹出框;弹出效果 定时关闭
关于原生js的弹出框样式 淡出淡入效果; <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
- java前端 js弹出框_js 弹出对话框3种方式
js 弹出对话框3种方式 (2012-12-03 16:10:47) 标签: it javascript js 弹出对话框3种方式对话框有三种 1:只是提醒,不能对脚本产生任何改变: 2:一般用于确认 ...
- html弹窗口并获取返回值,Js 弹出框口并返回值的两种常用方法
1.window.showModalDialog(url,args,dialogattrs)参数说明: url:弹出页面地址 agrs:主窗口传给对话框的参数,可以是任意类型(数组也可以) dialo ...
- layer + ajax 弹出框
项目中用到的一个很友好的弹出提示窗口.结合ajax很丝滑的与后台交互数据.引入layer.min.js layer.msg('你确定删除么?', { time: 0 //不自动关闭 ,btn: ['确 ...
最新文章
- 华北赛区，我们来啦！
- unity 模型销毁_Unity GameObject 销毁（Destroy）后的几种状态
- 桌面上计算机点击后,怎样设置电脑的鼠标点击后窗口(也就是桌面上点一下出来的窗口)为自己另类设计的个性窗口图案?求高手。...
- aix java 7下载_aix系统安装 jdk 1.7
- 基于单片机花式喷泉喷水池控制系统设计-单片机的简易电子钟加闹钟设计-51单片机车汽车流量检测电路系统-51单片机超声波三方向测距系统设计-基于51单片机超声波水位液位控制系统毕业设计
- Pascal VOC2012
- jQuery实现记住帐号密码功能
- ldaptemplate 分页_分页机皮带跑偏调整方法
- Word控件Spire.Doc 转换教程(二十一)：将非标准字体的word文档转换为PDF
- 卷积神经网络学习项目--Kaggle仙人掌识别--基于TensorFlow（未完成）
- linux 下线程池
- android 加速度模块,Android传感器API之：加速度Accelerometer功能源码
- 信息基础Homework4
- 常见的状态码及错误信息提示
- 用Photoshop制作LOMO风格暗角效果照片
- 学习管理!!中国历史上最经典的7个智慧案例
- 运算符 相与、相或、相异或、取反、左移、右移
- 开源中国源码学习UI篇（一）之FragmentTabHost的使用分析
- Vue3.0 凉凉了？Vue 最黑暗的一天！
- JS逆向加密——七麦网analysis参数