2021-07-07选中互斥问题

2021-07-07选中互斥问题

如图所示，我们想做一个对区县进行排名次的一个小功能。

比如，我们事先选好了【高新区第一名】，在我们想要切换为【寒亭区第一名】或者是【高新区第六名】，【高新区第一名】的选中状态都要被清除，反过来也一样。这就要同时考虑横向互斥和纵向互斥了。

css代码：

.check{
			background: url(/qlc/static/images/duihao.png) no-repeat center;
		}

html代码：

<tr>
	<td class="tdbk" rowspan="2">排名</td>
	<td class="tdbk" :colspan="cpdxList.length">测评对象</td>
</tr>
<tr>
	<template v-for="cpdx in cpdxList">
		<td class="tdbk">{{clean(cpdx.MC)}}</td>
	</template>
</tr>
<tr v-for="i in cpdxList.length">
	<td class="tdbk">{{i}}</td>
	<template v-for="(cpdx,index) in cpdxList">
		<td align="center" :id="clean(cpdx.ID)+'~'+i" :name="clean(cpdx.ID)" @click="getCheck($event)" :title="i">
   		</td>
	</template>
</tr>

js代码：

getCheck(e){//e为$event 也就是当前触发的是什么事件（比如鼠标事件）
	$(e.target).attr("class");//$event.target为该鼠标事件触发的目标
	var classStyle = clean($(e.target).attr("class"));
	var id = $(e.target).attr("id"); //此id为鼠标点击这一个元素（比如单元格）的id
	var dxid = id.split("~")[0];//选中的区县的id
	var pm = id.split("~")[1];//选中的区县的排名
	if(classStyle.includes("check")){//说明这个元素已经选中了，再次点击需要清除选中状态
		$(e.target).attr("class","");
		fVue.mxList.forEach(function(mx){
			if(clean(mx.CPDX_ID) == dxid){
				mx.PM = ""; 
			}
		});
	}else{//说明这个元素此时没选中，再次点击会选中
		var flag = true;
		for(var i = 0; i < fVue.mxList.length; i++) {
			var mx = fVue.mxList[i]; 
			//如果排名相等说明有人已经选择该排名，需要重新选择
			if(clean(mx.PM) == pm){//横向互斥
				$($("td[name='"+mx.CPDX_ID+"']")[pm - 1]).attr("class","");//已选中的清除选中状态
			}
		}
		if(flag){
			for(var i = 0; i < fVue.mxList.length; i++) {
				var mx = fVue.mxList[i]; 
				if(clean(mx.CPDX_ID) == dxid){//纵向互斥
					mx.PM = pm; 
					$(e.target).attr("class","check");
					$("td[name='"+dxid+"']").each(function(i){//因为纵向的dxid都是一样的，所以需要遍历
						if(id != $(this).attr("id")){//除了当前选中的这个单元格，其余的全部都取消选中
							$(this).attr("class","");	
						}
					});
				}
			}	
		}
	}
}

其中html代码中的【cpdxList】和js代码中出现的【mxList】都是List