亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我寫的代碼為嘛不停地報TypeError: arr[j] is null?還有汽車前面那個符號也不變化?請大神幫忙看看嘛

我寫的代碼為嘛不停地報TypeError: arr[j] is null?還有汽車前面那個符號也不變化?請大神幫忙看看嘛

需要實現的任務:? ? ? ? ? ? ? ? 1、點擊元素的增添按鈕時候,在該節點下增添節點(? ? ? ? ? ? ? ? ? ? ?可與頁面初始化時候的增添函數合并;封裝函數;? ? ? ? ? ? ? ? ? ?)? ? ? ? ? ? ? ? ? ?若無子節點,標題前面顯示為空;? ? ? ? ? ? ? ? 2、刪除節點,當點擊刪除按鈕時候,刪除該按鈕的父元素? ? ? ? ? ? ? ? 3、? ? ? ? ? ? ? ? ? ?點擊元素節點的時候,判斷節點下邊是否還有節點? ? ? ? ? ? ? ? ? ?如果有,合攏,并將該節點的顯示成合攏狀態? ? ? ? ? ? ? ? ? ?如果節點的下邊無節點,將其打開,節點顯示成打開狀態? ? ? ? ? ? ? ? 4、查詢節點,通過循環樹節點,與輸入值進行匹配,相同則將? ? ? ? ? ? ? ? ? ?其背景色顯示為紅色,如果找到的節點處于被父節點折疊隱藏的狀態,則需要做對應的展開<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta charset="utf-8"><title>無標題文檔</title><style>body{? ? ?display:flex;? ? ?align-item:center;? ? ?justify-content:center;? ? ?background:#096;? ? ?font-size:15px;? ? ?font-style:"微軟雅黑";? ? ?color:#000;? ? ?font-weight:bold; ? ??? ? ?}#tree{? ? ? ? ?width:400px;? ? ? ? ?height:400px;? ? ? ? ?border:1px solid #eee;? ? ? ? ?background-color:#fff;? ? ? ? ?margin-top:100px;?? ? ? ? ?position:relative;? ? ? ? ?padding:20px 20px;? ? ? ? ?}#node{? ? ? ? height:350px;? ? ? ? width:350px;? ? ? ? margin:10px 10px 10px 10px;? ? ? ?}.nodeShow{? ? ? ?width:200px;? ? ? ?line-height:20px;? ? ? ?margin:10px 15px;? ? ? ? }.nodeHide{? ? ? ?display:none;? ? ? ? }#footer{? ? ? ? position:absolute;? ? ? ? background:#066; width:400px; height:50px;? ? ? ? bottom:0px;? ? ? ? left:0px;? ? ? ? }#form{? ? ? position:absolute;? ? ? top:15px;? ? ? right:10px; ? ??? ? ? }.display{? ? ? ? border:2px solid #000;? ? ? ? display:inline-block;? ? ? ? text-decoration:none;? ? ? ? width:10px;? ? ? ? height:10px;? ? ? ? color:#000;?? ? ? ? text-align:center;?? ? ? ? vertical-align:top;? ? ? ? line-height:8px;? ? ? ? padding:1px 1px 1px 1px;? ? ? }.add,.del{? ? ? ? margin-left:6px;? ? ? ? display:none; ?? ? ? ? vertical-align:top; ?? ? }.nodeHead span{? ? ?cursor:pointer;? ? ?margin-left:3px;? ? }.nodeHead:hover >.add,.nodeHead:hover >.del{? ? ?display:inline;? ? ?cursor:pointer; ? ??? ? }</style></head><body><div id="tree">?? <div class="nodeShow" id="node">? ?<span class="nodeHead" id="car">? ?<span class="txt">? ? ?<a class="display" href="javascript:;">+</a>?? ? ? 汽車? ? ?</span>? ? ? <img class="add" src="images/01.png">? ? </span>? </div> ? ? ? ??? <div id=footer>? ? ?<div id="form">? ? ?<input type="text" id="txt"/>? ? ?<input type="button" id="btn1" value="查找結點"/>? ? ?</div> ? ?? </div></div><script type="text/javascript" src="js/tree.js"></script></body></html>JavaScript代碼//增加子元素function addChild(parent,text){? ? ? ?var img1=document.createElement("img");?? ? ? ?var img2=document.createElement("img");?? ? ? ?img1.setAttribute("src","images/01.png");? ? ? ?img2.setAttribute("src","images/02.png");? ? ? ?img1.setAttribute("class","add");? ? ? ?img2.setAttribute("class","del");? ? ? ?var display=document.createElement("a");? ? ? ?display.setAttribute("href","javascript:;");? ? ? ?display.setAttribute("class","display"); ?? ? ? ?var word1=document.createTextNode("+");? ? ? ?display.appendChild(word1);? ? ? ?? ? ? ?var ospan=document.createElement("span");? ? ? ?var text=document.createTextNode(text);? ? ? ?ospan.setAttribute("class","txt");?? ? ? ?ospan.appendChild(display);? ? ? ?ospan.appendChild(text);? ?? ? ? ?var nodeHead=document.createElement("span");? ? ? ?nodeHead.setAttribute("class","nodeHead");? ? ? ?nodeHead.appendChild(ospan);? ? ? ?nodeHead.appendChild(img1);? ? ? ?nodeHead.appendChild(img2);?? ? ? ?var nodeShow=document.createElement("div");? ? ? ?nodeShow.setAttribute("class","nodeShow")? ? ? ?nodeShow.appendChild(nodeHead);? ? ? ?parent.appendChild(nodeShow);? }//樹的初始化var node=document.getElementById("node");var txtArr=document.getElementsByClassName("txt");var nodeShowArr=document.getElementsByClassName("nodeShow");addChild(node,"英國品牌");addChild(nodeShowArr[1],"路虎");addChild(nodeShowArr[1],"捷豹");addChild(node,"德國品牌");addChild(nodeShowArr[4],"寶馬");addChild(nodeShowArr[4],"奔馳");addChild(nodeShowArr[4],"奧迪");addChild(node,"美國品牌");addChild(nodeShowArr[8],"福特");addChild(nodeShowArr[8],"林肯");//遍歷數組function nextsiblings(nodeElement){? ? ?if(nodeElement){? ? ? ?arr.push(nodeElement.nextSibling);? ? ? ?nextsiblings(nodeElement.nextSibling); ??}}for(var i=0;i<txtArr.length;i++){? ?txtArr[i].onclick=function(){? ? ?arr=[];? ? ?var self=this;? ? ?nextsiblings(this.parentNode);? ? ?if(arr.length>1&&foldNode(this.parentNode.parentNode)==true){? ? ? ?for(var j=0;j<arr.length;j++){? ? ? ? ?if(arr[j].className=="nodeShow"){? ? ? ? ?arr[j].style.display="none";? ? ? ? ?console.log(arr[j]);? ? ? ? ?self.firstChild.innerHTML="-";? ? ?}?? ? }? ?}? } ?}//判斷節點是否收攏function foldNode(nodeElement){? ? if(nodeElement.childNodes.length>1){? ? ?return true;??}}var arr=[];var data=[];traverseDF(node,data);////js多叉樹深度優先遍歷function traverseDF(node,nodeList){? ? ?if(node){? ? ? ? ? nodeList.push(node);? ? ? ? ? for(var i=0,len=node.children.length;i<len;i++){? ? ? ? ? ? ?if(node.children[i].className=="nodeShow"){? ? ? ? ? ? ?traverseDF(node.children[i],nodeList);? ? ? ?}? ? ?} ??? ?}?}//添加瀏覽器兼容事件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;? }?}
查看完整描述

1 回答

?
杰杰就是我

TA貢獻32條經驗 獲得超24個贊

我看了一下 你的代碼 ?首先你往 arr里面存入數據, ?可以得到長度, 但是你得到的長度始終比你 子節點的長度 大1 , ?所以導致 出錯 ,因為最后一個為null, 請思考一下問題的所在

查看完整回答
反對 回復 2016-12-22
  • 我背后有個胖子
    我背后有個胖子
    你好,出現null的,我已經在遞歸函數function nextsiblings(nodeElement){ if(nodeElement){ arr.push(nodeElement.nextSibling); nextsiblings(nodeElement.nextSibling); } } 中將判斷條件改為if(nodeElement.nextSibling),解決了null的問題,但是我用console.log彈出當前點擊,當我點擊汽車的時候,彈出的arr顯示了<TextNode textContent="\n ">這一個東東,導致我點擊汽車時無法疊攏,且汽車前面的標簽未變化,這是為嘛,我已經查看了HTML結夠,木有問題噠,麻煩大神啦
  • 1 回答
  • 0 關注
  • 1373 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號