大神们在这段代码中我增加一个输入框及一个“查询”按钮，点击按钮时，开始在树中以动画形式查找节点内容和输入框中内容一致的节点，找到后以特殊样式显示该节点为红色，可是前三个为什么遍历查找不到呢？<!DOCTYPE html><html><head> <meta charsHeyet="UTF-8"> <title>多叉树</title><style> #rooter{ display:flex; display:-webkit-flex; flex-flow:row nowrap; width:1300px; height:150px; border:1px solid #333; font-size:12px; } #Child1{ display:flex; display:-webkit-flex; flex-flow:row nowrap; margin:auto; width:500px; height:140px; border:1px solid #333; } #Apple{ display:flex; display:-webkit-flex; flex-flow:row nowrap; margin:auto; width:250px; height:120px; border:1px solid #333; } #Poor{ margin:auto; width:50px; height:85px; border:1px solid #333; } #Pig{ margin:auto; width:30px; height:85px; border:1px solid #333; }#Cola{ margin:auto; width:30px; height:85px; border:1px solid #333; }#Soccor{ margin:auto; width:40px; height:85px; border:1px solid #333; }#Phone{ margin:auto; width:85px; height:120px; border:1px solid #333; }#Bs{ display:flex; display:-webkit-flex; flex-flow:row nowrap; margin:auto; width:120px; height:120px; border:1px solid #333; }#Book{ margin:auto; width:40px; height:40px; border:1px solid #333; }#School{ margin:auto; width:40px; height:40px; border:1px solid #333; }#Human,#Program{ display:flex; display:-webkit-flex; flex-flow:row nowrap; margin:auto; width:230px; height:120px; border:1px solid #333; }#Man,#Code,#Class{ margin:auto; width:50px; height:85px; border:1px solid #333; }#Element{ display:flex; display:-webkit-flex; flex-flow:row nowrap; margin:auto; width:110px; height:85px; border:1px solid #333; }#Gots{ margin:auto; width:60px; height:60px; border:1px solid #333; }#Operate{ margin:auto; width:75px; height:85px; border:1px solid #333; }#Fish{ margin:auto; width:200px; height:140px; border:1px solid #333; }</style></head><body> <div id="rooter" >Super <div id="Child1">Call <div id="Apple">Apple <div id="Poor">Poor</div> <div id="Pig">Pig</div> <div id="Cola">Cola</div> <div id="Soccor">Soccor</div> </div> <div id="Phone">Phone</div> <div id="Bs"> <div id="Book">Book</div> <div id="School">School</div> </div> </div> <div id="Child1">Note <div id="Human">Human <div id="Code">Code</div> <div id="Operate">Operate</div> <div id="Man">Man</div> </div> <div id="Program">Program <div id="Element">Element <div id="Gots">Gots</div> </div> <div id="Class">Class</div> </div> </div> <div id="Fish">Fish</div> </div> <input type="text"/> <input type="button" value="查询"> <input type="button" value="遍历"> <script>var inputs=document.getElementsByTagName("input");var rooter=document.getElementById("rooter");var data=[];var timer=null;var lock=false;//添加浏览器兼容事件 function addEvent(el,type,handler){ if(el.addEventListener){ el.addEventListener(type,handler,false); }else if(el.attachEvent){ el.attachEvent("on"+type,handler); }else{ el["on"+type]=handler; }}//js多叉树深度优先遍历function traverseDF(node,nodeList){ if(node){ nodeList.push(node); for(var i=0,len=node.children.length;i<len;i++){ traverseDF(node.children[i],nodeList); } } }//添加事件点击函数addEvent(inputs[1],"click",function(){ var value=inputs[0].value; renter(); traverseDF(rooter,data); changeColor();});addEvent(inputs[2],"click",function(){ renter(); traverseDF(rooter,data); changeColor(); });//变色函数function changeColor(){ var i=0; var value=inputs[0].value.trim(); data[i].style.background="blue"; timer=setInterval(function(){ i++; if(i<data.length){ data[i].style.background="blue"; data[i-1].style.background="#fff"; if(data[i].innerText.localeCompare(value)===0){ data[i].style.background="red"; } }else{ clearInterval(timer); data[data.length-1].style.background="#fff"; } },500); }//初始化样式function renter(){ data=[]; clearInterval(timer); var divs=document.getElementsByTagName("div"); for(var i=0;i<divs.length;i++){ divs[i].style.background="#fff"; }}</script></body></html>
1 回答
已采纳
cyabonc
TA贡献6条经验 获得超4个赞
首先函数changeColor内部i++改为++i;
另外，前三层没找到是因为你使用innerText去比较字符串，前三层都是有子节点的，子节点也包含字符串。例如，当你输出Call时，对比的innerText值为"
Call
Apple
Poor
Pig
Cola
Soccor
Phone
Book
School
"
所以字符串肯定不相等。
另外我觉得这个问题没那么难找，多百度下调试方法。就你的代码来说，使用字符串比较来给定元素背景色，那元素背景色错误，那肯定就是没有走红色背景的那行代码，也就是判断为false。打断点确定一下比较的字符串是否是你的预期值，没有那么难的。
添加回答
举报
0/150
提交
取消