87,838
社区成员
发帖
与我相关
我的任务
分享div的换位
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#div1,#div2 {width:550px;height:565px;overflow-y:scroll;border:1px solid #000;overflow-style:marquee,panner;}
#div2{ position:absolute;left:720px;top:28px;}
#hk2,#hk1,#hk3,#hk4,#hk5,#hk6{width:158px;height:180px;padding-left:10px;margin:2px;
background-color:#eee;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;float:left;}
.bn1,.bn2{ width:85px;height:31px; border:none;outline:none;cursor:pointer;background:url(bn.png) left top no-repeat;color:#fff;font-size:16px;font-weight:bold;}
.bn1{ position:absolute;left:600px;top:180px;}
.bn2{ position:absolute;left:600px;top:260px}
.aaa{background:red!important;}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="doy">
<div id="div1">
<div id="hk1" >
</div>
<div id="hk2" >
</div>
<div id="hk3" >
</div>
<div id="hk4" >
</div>
<div id="hk5" >
</div>
<div id="hk6" >
</div>
</div>
<div id="div2">
</div>
<!--点击-->
<input type="button" class="bn1" onclick="left_click()" value=">">
<input type="button" class="bn2" onclick="right_click()" value="<">
</body>
</html>
<script>
$('#div1,#div2').on('click','div',function(){$(this).addClass('aaa')})
function left_click(){
$('#div1 .aaa').appendTo('#div2').removeClass('aaa')
}
function right_click(){
$('#div2 .aaa').appendTo('#div1').removeClass('aaa')
}
</script>感谢给这段代码的高手。现已实现以上功能,但是我还想要点一下变色,在点一下就不变色。移动过去后新创建一个div,移动回来新创建的div就消失。 就差此2个功能了,我才学这，感觉这应用比较有意思。。谢谢高手不全。。在此像各前辈学习
...全文
请发表友善的回复…
发表回复
wen19910312 2015-09-06
- 打赏
- 举报
$('#div1,#div2').on('click','div',function(){$(this).toggleClass('aaa')});
function left_click(){
var aaa = $('#div1 .aaa');
aaa.appendTo('#div2').removeClass('aaa');
for(var i = 0; i < aaa.length; i++)
$('#div1').append("<span>12345</span>");
}
function right_click(){
var aaa = $('#div2 .aaa');
aaa.appendTo('#div1').removeClass('aaa');
for(var i = 0; i < aaa.length; i++)
$('#div1 span:last').remove();
}
香蕉猪 2015-09-02
- 打赏
- 举报
那就再加个监控，，，监控div的位置是不是发生了改变。wen19910312 2015-09-02
- 打赏
- 举报
这下面的的.bbb 是什么？ 还有做的点击第二次消除颜色呢？[/quote]
对不起 没看清楚，功能都实现了 。真是强大 如此精短的代码就实现了 果然还是经验问题 受教了[/quote]
但是还是有一个小bug? 就是新创建的.bbb 没加条件。当你没已过去就点移动按钮的时候还是会出现，我想要的效果是，移动过去一张或者几张就出现1或N张bbb 现在就是只要点了左移就出现一次XXX 右移就报错。。。
wen19910312 2015-09-02
- 打赏
- 举报
这下面的的.bbb 是什么？ 还有做的点击第二次消除颜色呢？[/quote]
对不起 没看清楚，功能都实现了 。真是强大 如此精短的代码就实现了 果然还是经验问题 受教了
wen19910312 2015-09-02
- 打赏
- 举报
这下面的的.bbb 是什么？ 还有做的点击第二次消除颜色呢？
wen19910312 2015-09-02
- 打赏
- 举报
$('#div1,#div2').on('click','div',function(){$(this).toggleClass('aaa')});
function left_click(){
var aaa = $('#div1 .aaa');
aaa.appendTo('#div2').removeClass('aaa');
for(var i = 0; i < aaa.length; i++)
$('#div1').append("<span>12345</span>");
}
function right_click(){
var aaa = $('#div2 .aaa');
aaa.appendTo('#div1').removeClass('aaa');
for(var i = 0; i < aaa.length; i++)
$('#div1 span:last').remove();
}
天际的海浪 2015-09-02
- 打赏
- 举报
$('#div1,#div2').on('click','div',function(){$(this).toggleClass('aaa')});
function left_click(){
var aaa = $('#div1 .aaa');
aaa.appendTo('#div2').removeClass('aaa');
for(var i = 0; i < aaa.length; i++)
$('#div1').append("<span>12345</span>");
}
function right_click(){
var aaa = $('#div2 .aaa');
aaa.appendTo('#div1').removeClass('aaa');
for(var i = 0; i < aaa.length; i++)
$('#div1 span:last').remove();
}
wen19910312 2015-09-02
- 打赏
- 举报
怎么做呀 新手呢 还有新创建的xxx 不能点 又怎么做
天际的海浪 2015-09-01
- 打赏
- 举报
$('#div1,#div2').on('click','div',function(){$(this).toggleClass('aaa')})
function left_click(){
$('#div1 .aaa').appendTo('#div2').removeClass('aaa');
$('#div1').append("<div class='bbb'>xxxxx</div>");
}
function right_click(){
$('#div2 .aaa').appendTo('#div1').removeClass('aaa');
$('#div1 .bbb:last').remove();
}
