请大神们帮忙看看这段JS关于多叉树遍历代码，谢谢
大神们
在这段代码中我增加一个输入框及一个“查询”按钮，点击按钮时，开始在树中以动画形式查找节点内容和输入框中内容一致的节点，找到后以特殊样式显示该节点为红色，可是前三个为什么遍历查找不到呢？
<!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
首先函数changeColor内部i++改为++i; 另外，前三层没找到是因为你使用innerText去比较字符串，前三层都是有子节点的，子节点也包含字符串。例如，当你输出Call时，对比的innerText值为"CallApplePoorPigColaSoccorPhoneBookSchool"所以字符串肯定不相等。另外我觉得这个问题没那么难找，多百度下调试方法。就你的代码来说，使用字符串比较来给定元素背景色，那元素背景色错误，那肯定就是没有走红色背景的那行代码，也就是判断为false。打断点确定一下比较的字符串是否是你的预期值，没有那么难的。
随时随地看视频慕课网APP
相关分类
JavaScript