jquer上移、下移、置顶、删除

哎呀哎呀诶

于 2022-12-12 19:34:11 发布

阅读量86

点赞数 1

分类专栏：前后端效果小实现文章标签：前端 html javascript

本文链接：https://blog.csdn.net/hhmmj/article/details/128292060

版权

前后端效果小实现专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<div class="content-div">
	<div class="edit-content">
		<ul class="edit-ul">
			<li>模块1</li>
			<li class="control-li position-up">上移</li>
			<li class="control-li position-down">下移</li>
			<li class="control-li position-top">置顶</li>
			<li class="control-li record-delete">删除</li>
		</ul>
	</div>
	<div class="edit-content">
		<ul class="edit-ul">
			<li>模块2</li>
			<li class="control-li position-up">上移</li>
			<li class="control-li position-down">下移</li>
			<li class="control-li position-top">置顶</li>
			<li class="control-li record-delete">删除</li>
		</ul>
	</div>
	<div class="edit-content">
		<ul class="edit-ul">
			<li>模块3</li>
			<li class="control-li position-up">上移</li>
			<li class="control-li position-down">下移</li>
			<li class="control-li position-top">置顶</li>
			<li class="control-li record-delete">删除</li>
		</ul>
	</div>
</div>

<script type="text/javascript">
	//监听control-li
	$(".control-li").click(function(){
		// 上移
		if ($(this).hasClass("position-up")){
			//1.复制数据
			var obj = $(this).parent().parent().clone(true);
			//2.在上一条数据之前添加数据
			$(this).parent().parent().prev().before(obj);
			//3.删除数据
			$(this).parent().parent().remove();
		}
		// 下移
		if ($(this).hasClass("position-down")){
			//1.复制数据
			var obj = $(this).parent().parent().clone(true);
			//2.在下一条数据之后添加数据
			$(this).parent().parent().next().after(obj);
			//3.删除数据
			$(this).parent().parent().remove();
		}
		// 删除
		if ($(this).hasClass("record-delete")){
			$(this).parent().parent().remove();
		}
		// 置顶
		if ($(this).hasClass("position-top")){		
			//1.复制数据
			var obj = $(this).parent().parent().clone(true);
			//2.删除数据
			$(this).parent().parent().remove();
			//3.顶部追加本条数据
			$(".content-div").prepend(obj);
		}
		
	});
</script>