浅谈js数组拿出某元素，对该元素添加特殊样式，并对除此元素外的其他元素添加其他样式

浅谈数组元素样式控制

作为刚从ui设计转向前端的小白，最近开始迷上了js，今天又面临了一个新问题，一个数组，需要控制某个元素样式变化，其他样式出现不同的变化，话不多说，先上代码

js代码：

function algorithm_fn(n,m){
		for(var i=1;i<=4;i++){
			var alldiv=document.getElementById("d"+i)
			alldiv.style.display="none"
		}
			var div=document.getElementById("d"+m)
			div.style.display="block";
	    for (var i=1;i<=4;i++){
	    	var nodiv=document.getElementById("d"+i)
	    	if(nodiv.style.display=="block"){
	    		// console.log(n)
	    		n.firstElementChild.style.borderBottom="2px solid red";	
	    	}
	    	else{
	    		var hel=document.getElementById("li"+i)
	    		console.log(hel)
	    		hel.firstElementChild.style.border="";	
	    	}
	    }
	}

html代码：

<ul class="algorithm_child_nav">
                		<li id="li1" onclick="algorithm_fn(this,1)" class="algorithm_child_nav_li">
                			<a href="#" class="algorithm_white-bg"><i id="i1" class="algorithm_icon algorithm_icon-circle-online algorithm_text-success"></i> 1.单元设置</a>
                		</li>
                		<li id="li2" onclick="algorithm_fn(this,2)" class="algorithm_child_nav_li">
                			<a href="#" class="algorithm_white-bg"><i id="i2" class="algorithm_icon algorithm_icon-circle-online algorithm_text-success"></i> 2.指标设置</a>
                		</li>
                		<li id="li3" onclick="algorithm_fn(this,3)" class="algorithm_child_nav_li">
                			<a href="#" class="algorithm_white-bg"><i id="i3" class="algorithm_icon algorithm_icon-circle-online algorithm_text-success"></i> 3.算法设置</a>
                		</li>
                		<li id="li4" onclick="algorithm_fn(this,4)" class="algorithm_child_nav_li">       			
                			<a href="#" class="algorithm_white-bg"><i id="i4" class="algorithm_icon algorithm_icon-circle-online algorithm_text-success"></i> 4.其他设置</a>
                		</li>
                	</ul>

这是一个弹出框索引层，需求时ui想在点击个索引时添加一个
border-bottom，本身应该不难，只需知道用户点击的是哪一个再对其添加一个样式就行，可当写完之后才发现会出现每点击一个都会出现一个border-bottom，这自然不是ui要的，所以要保证点击一个出现下划线，点击其他后前一个下划线消失，移到后一个上，这就需要不光知道用户点击了哪些索引，还要知道除此之外其他索引是哪些

for(var i=1;i<=4;i++){
			var alldiv=document.getElementById("d"+i)
			alldiv.style.display="none"
		}

首先这段代码，是为了在用户不点击任何索引时只显示第一个索引页面，其他界面不显示。

var div=document.getElementById("d"+m)
			div.style.display="block";

这段代码即在用户点击索引时显示页面

 for (var i=1;i<=4;i++){
	    	var nodiv=document.getElementById("d"+i)
	    	if(nodiv.style.display=="block"){
	    		// console.log(n)
	    		n.firstElementChild.style.borderBottom="2px solid red";	
	    	}

最重要的是这次循环，遍历数组元素，添加的if语句是为了筛选出当前已被选中的索引，给当前索引添加样式

	else{
	    		var hel=document.getElementById("li"+i)
	    		// console.log(hel)
	    		hel.firstElementChild.style.border="";	
	    	}

在筛选出被选中对象后，使用else就能找出未被选择的对象，定义一个新的参数再对对象添加样式将border清空即可实现需求，多次测试后并未发现bug

这只是自己用自己最好理解的方式敲出的代码，没有去考虑时空复杂度，算法应该也不是最佳，还没有去考虑过在用户自己在添加数据后和数据传输时是否会出现问题，但作为小白能自己去解决一个bug确实很开心，继续努力，希望能早日拿到心仪公司的offer