您的位置: 首页  >  文章  >  jquery双向列表左右切换功能案例

jquery双向列表左右切换功能案例

分类: 文章 • 2022-10-19 18:08:50

废话不多说直接上代码

前端html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css"/>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.mCustomScrollbar.concat.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="contentContainerBox">
			<!--左侧的内容-->
			<div class="content_itemBox">
				<ul>
					<li>
						<p>
							<i></i>
							<span>模拟软件一</span>
						</p>
						<div class="selectBox_left">
							<span>类型A</span>
							<span>类型B</span>
							<span>类型C</span>
							<span>类型D</span>
							<span>类型E</span>
							<span>类型F</span>
							<span>类型G</span>
							<span>类型H</span>
							<span>类型I</span>
							<span>类型G</span>
						</div>
					</li>
					<li>
						<p>
							<i></i>
							<span>模拟软件二</span>
						</p>
						<div class="selectBox_left">
							<span>操作A</span>
							<span>操作B</span>
							<span>操作C</span>
							<span>操作D</span>
							<span>操作E</span>
						</div>
					</li>
				</ul>
			</div>
			
			<!--中间的内容-->
			<div class="content_cn">
				<span class="item_toRight">向右</span>
				<span class="item_toLeft">向左</span>
			</div>
			
			
			<!--右侧的内容-->
			<div class="content_selectBox">
				<ul>
					<li>
						<p>
							<i></i>
							<span>模拟软件一</span>
						</p>
						<div class="selectBox_right">
							
						</div>
					</li>
					<li>
						<p>
							<i></i>
							<span>模拟软件二</span>
						</p>
						<div class="selectBox_right">
							
						</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

 

index.js代码

$(function(){
	resultTotal();
	resourceOverFlow();
})
function resourceOverFlow(){
	$(".selectBox_left").mCustomScrollbar();
	$(".selectBox_right").mCustomScrollbar();
}
function resultTotal(){
	//判断左侧有多少被选中
	$(".selectBox_left").delegate("span","click",function(){
		var classname = this.className;
		if(classname == "active"){
			this.className = "";
		}else{
			this.className = "active";
		}
	})
	//判断右侧有多少被选中
	$(".selectBox_right").delegate("span","click",function(){
		var classname = this.className;
		if(classname == "active"){
			this.className = "";
		}else{
			this.className = "active";
		}
	})
	//点击向右  的操作
	var leftCheckArray = {}
	$(".item_toRight").click(function(){
		$(".selectBox_left").each(function(i,o){
			var resultArray = [];															//存放数组
			$(o).find("[class=active]").each(function(lin,selectValue){						//查看里面内容是否被选中
				var selectIndex = $(this).parent().parent().parent().parent().index()		//获取li的索引
				console.log(selectIndex)
				if(resultArray.indexOf($(selectValue).html()) == -1){						//判断选中的值，是否在数组中，不存在返回-1
					var content = $(".content_selectBox li").eq(selectIndex).children(".selectBox_right").text();//获取右侧li的索引，里面的内容
					if(content.indexOf($(selectValue).html()) == -1){						//判断右侧里面的内容是否包含 被选中的内容  不包含  返回-1
						$(".content_selectBox li").eq(selectIndex).children(".selectBox_right").find(".mCSB_container").append("<span>"+ $(selectValue).html() +"</span>")
					}
				}
			})
		})
		$(".selectBox_left").each(function(i,o){
			$(o).find("[class=active]").prop("disabled",true);
		})
		resourceOverFlow();
	})
	//点击向左侧的箭头
	var rightCheckArray = {}
	$(".item_toLeft").click(function(){
		$(".selectBox_right").each(function(i,o){
			var resultArray = [];		
			$(o).find("[class=active]").each(function(lin,selectValue){
				var selectIndex = $(this).parent().parent().parent().parent().index()		//获取li的索引
				console.log(selectIndex)
				var right = this;
				$(this).parent().parent().parent().parent().find("span[class=active]").each(function(){	//查看当前选中的  class= active
					resultArray.push($(this).text().replace(/\s/g,""));
				})
				var content = $(".content_itemBox li").eq(selectIndex).children(".selectBox_left").find("span")
				var content1 = $(".content_itemBox li").eq(selectIndex).children(".selectBox_left").find("span").text().replace
				$.each(content, function(i,v) {
					console.log(v)
					$.each(resultArray, function(ii,vv) {
						if($(v).text() == vv ){
							$(v).prop("disabled",false).removeClass("active")
						}
					});
				});
				if(content1.indexOf($(selectValue).html()) == -1 ){
					$(".content_itemBox li").eq(selectIndex).children(".selectBox_left").find(".mCSB_container").append("<span>"+ $(selectValue).html() +"</span>")
				}
			})
		})
	})
}

index.css代码

*{
	margin: 0px;
	padding: 0px;
}
li{
	list-style: none;
}

.contentContainerBox{
	background: #1c1b1b;
    position: absolute;
    width: 100%;
    height: 100%;
}

/*左侧的内容*/
.content_itemBox{
	position: absolute;
	left: 0%;
}
.content_itemBox ul li{
	height: 210px;
}
.content_itemBox>ul>li>p{
	position: absolute;
	width: 150px;
	height: 20px;
	margin-left: 26px;
	margin-top: 18px;
}
.content_itemBox>ul>li>p>i{
	position: absolute;
	width: 12px;
	height: 12px;
	background: #ffffff;
	margin-top: 10px;
}
.content_itemBox>ul>li>p>span{
	position: absolute;
	font-family: "微软雅黑";
	font-size: 16px;
	color: #ffffff;
	margin-left: 22px;
	margin-top: 5px;
	font-weight: bold;
}
.content_itemBox ul li:nth-child(odd){
	background: #ffffff;
}


.selectBox_left{
	position: absolute;
	width: 570px;
	height: 130px;
	margin-left: 30px;
	margin-top: 46px;
	overflow: auto;
}
.selectBox_left span{
	font-family: "微软雅黑";
	font-size: 14px;
	display: block;
	float: left;
	width: 18%;
	height: 30px;
	text-align: center;
	line-height: 30px;
	background: #f3fafc;
	margin-left: 10px;
	margin-top: 10px;
	border-radius: 5px;
	overflow: hidden;
	cursor: pointer;
}
.selectBox_left .active{
	background: #a1a3a3;
}


/*中间的内容*/
.content_cn{
	position: absolute;
    left: 45%;
    z-index: 999;
    margin-top: 162px;
    color: white;
}

/*右侧的内容*/
.content_selectBox{
	position: absolute;
	left: 50%;
}
.content_selectBox ul li{
	height: 210px;
}
.content_selectBox>ul>li>p{
	position: absolute;
	width: 150px;
	height: 20px;
	margin-left: 26px;
	margin-top: 18px;
}
.content_selectBox>ul>li>p>i{
	position: absolute;
	width: 12px;
	height: 12px;
	background: #ffffff;
	margin-top: 10px;
}
.content_selectBox>ul>li>p>span{
	position: absolute;
	font-family: "微软雅黑";
	font-size: 16px;
	color: #ffffff;
	margin-left: 22px;
	margin-top: 5px;
	font-weight: bold;
}
.content_selectBox ul li:nth-child(odd){
	background: #ffffff;
}
.selectBox_right{
	position: absolute;
	width: 570px;
	height: 130px;
	margin-left: 30px;
	margin-top: 46px;
	overflow: auto;
}
.selectBox_right span{
	font-family: "微软雅黑";
	font-size: 14px;
	display: block;
	float: left;
	width: 18%;
	height: 30px;
	text-align: center;
	line-height: 30px;
	background: #f3fafc;
	margin-left: 10px;
	margin-top: 10px;
	border-radius: 5px;
	overflow: hidden;
	cursor: pointer;
}
.selectBox_right .active{
	background: #a1a3a3;
}

效果图

jquery双向列表左右切换功能案例

 

jquery双向列表左右切换功能案例

 

样式什么的 ，各位前端朋友可以自行改动。谢谢。朋友们的互动，互相学习，天天向上。gogoup

 

相关推荐