jquery如何在按钮单击交换左右相邻的元素位置?
每个图片hover的时候就会弹出三个按钮效果一个是左移，一个是右移，一个是删除。删除的效果我已经写好了。$(".toright").click(function(){//...
每个图片hover的时候就会弹出三个按钮效果 一个是左移，一个是右移，一个是删除。删除的效果我已经写好了。
$(".toright").click(function(){ //如何在原有的位置把图片跟右边切换回去？ }); $(".toleft").click(function(){ //insertBefore 也没用的！ });`请输入代码` 展开
$(".toright").click(function(){ //如何在原有的位置把图片跟右边切换回去？ }); $(".toleft").click(function(){ //insertBefore 也没用的！ });`请输入代码` 展开
3个回答
展开全部
我写了一个示例代码，你可以参考一下。功能跟你说的差不多就是没有删除按钮：
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta charset="utf-8" />
<title>
</title>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(function(){
$('.btn-right').click(function(){
var box=$(this).parent(); //获取按钮的父元素
var box_next=box.next(); //父元素的下一个同胞元素
var box_next_left=parseInt(box_next.css('left')); //父元素下一个同胞元素的left值
var box_left=parseInt(box.css('left')); //父元素的left值
if(box_next_left){
box.animate({left:box_next_left.toString()});
box_next.animate({left:box_left.toString()});
box.insertAfter(box_next);
}
});
$('.btn-left').click(function(){
var box=$(this).parent(); //获取按钮的父元素
var box_left=parseInt(box.css('left')); //父元素的left值
var box_prev=box.prev(); //父元素的上一个同胞元素
var box_prev_left=parseInt(box_prev.css('left')); //父元素下一个同胞元素的left值
if(box_left){
box.animate({left:box_prev_left.toString()});
box_prev.animate({left:box_left.toString()});
box.insertBefore(box_prev);
}
});
});
</script>
<style type="text/css">
body {margin:0px;padding:0px;position:relative;}
#div-box1 {width:100px;height:100px;background:#f00;border:0px solid #f00;position:absolute;left:0px;}
#div-box2 {width:100px;height:100px;background:#999;border:0px solid #00f;position:absolute;left:110px;}
#div-box3 {width:100px;height:100px;background:#00f;border:0px solid #00f;position:absolute;left:220px;}
#div-box4 {width:100px;height:100px;background:#0f0;border:0px solid #0F0;position:absolute;left:330px;}
</style>
</head>
<body>
<div id="div-box1" class="box1">
<input type="button" value="向左" class='btn-left' id="btn1-left" />
<input type="button" value="向右" class='btn-right' id="btn1-right" >
</div>
<div id="div-box2" class="box1">
<input type="button" value="向左" class='btn-left' id="btn2-left" />
<input type="button" value="向右" class='btn-right' id="btn1-right" >
</div>
<div id="div-box3">
<input type="button" value="向左" class='btn-left' id="btn3-left" />
<input type="button" value="向右" class='btn-right' id="btn3-right" >
</div>
<div id="div-box4">
<input type="button" value="向左" class='btn-left' id="btn3-left" />
<input type="button" value="向右" class='btn-right' id="btn3-right" >
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(".toright").click(function(){
//当点击(向右)的时候去获取当前元素的下个元素,
var xia=$(this).next();
//然后去获取当前 元素 和 下个元素的top left值
//然后将两个元素的top left值一交换就可以了
//代码我就不写了
//点击向左按钮 去获取上一个元素就可以了 $('.toright').prev();
});
//当点击(向右)的时候去获取当前元素的下个元素,
var xia=$(this).next();
//然后去获取当前 元素 和 下个元素的top left值
//然后将两个元素的top left值一交换就可以了
//代码我就不写了
//点击向左按钮 去获取上一个元素就可以了 $('.toright').prev();
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把html也放出来看一下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
