我需要帮助编写跨浏览器来编写JavaScript代码的代码。在Internet Explorer 8上执行我的JavaScript时,我得到object.key的错误。所以我需要一些帮助来修复我的代码,以便我可以正确地在Internet Explorer 8上运行。其次,expandable和collapsable不能处理sortObject函数。请更新我的小提琴,并提供一个链接。以下是现场小提琴链接:
var dataSource = ({
"Pen": ({
"Cello": ({
"C2": ({}),
"C1": ({})
}),
"Parker": ({
"P2": ({}),
"P1": ({})
})
})
});
var traverseObject = function (obj) {
var ul = document.createElement("ul"),
li;
for (var prop in obj) {
li = document.createElement("li");
li.appendChild(document.createTextNode(prop));
li.onclick = function(e) {
var classNames = e.currentTarget.className;
if (classNames.indexOf("hidden") == -1) {
e.currentTarget.className += "hidden";
} else {
e.currentTarget.className = e.currentTarget.className.replace("hidden", "");
}
e.stopPropagation();
}
if (typeof obj[prop] == "object" && Object.keys(obj[prop]).length) {
console.log(Object.keys(obj[prop]).length + " " + Object.keys(obj[prop]));
li.appendChild(traverseObject(obj[prop]));
} else {
li.className += "leaf";
}
ul.appendChild(li);
console.log(ul);
}
return ul;
},
sortedObject = function (obj) {
var ul = document.createElement("ul"),
li,span, sorted = [],
i = 0;
for (var prop in obj) {
sorted.push(prop);
}
sorted.sort();
for (; i < sorted.length; i++) {
li = document.createElement("li");
span = document.createElement("span");
span.innerHTML = sorted[i];
span.onclick = function(e) {
var classNames = e.currentTarget.className;
if (classNames.indexOf("hidden") == -1) {
e.currentTarget.className += "hidden";
} else {
e.currentTarget.className = e.currentTarget.className.replace("hidden", "");
}
e.stopPropagation();
}
li.appendChild(span);
if (typeof obj[sorted[i]] == "object" && Object.keys(obj[sorted[i]]).length) {
console.log(Object.keys(obj[sorted[i]]).length + " " + Object.keys(obj[sorted[i]]));
li.appendChild(sortedObject(obj[sorted[i]]));
} else {
li.className += "leaf";
}
ul.appendChild(li);
console.log(ul);
}
return ul;
};
window.onload = function () {
document.getElementById("dvList1").appendChild(traverseObject(dataSource));
document.getElementById("dvList2").appendChild(sortedObject(dataSource));
}
谢谢
答案 0 :(得分:0)
var objectKeys = function(){
var length = 0;
for(var prop in obj){
if(data.hasOwnProperty(prop))
length++;
}
return length;
},
traverseObject = function (obj) {
var ul = document.createElement("ul"),
li;
for (var prop in obj) {
li = document.createElement("li");
li.appendChild(document.createTextNode(prop));
li.onclick = function(e) {
var classNames = e.currentTarget.className;
if (classNames.indexOf("hidden") == -1) {
e.currentTarget.className += "hidden";
} else {
e.currentTarget.className = e.currentTarget.className.replace("hidden", "");
}
e.stopPropagation();
}
if (typeof obj[prop] == "object" && objectKeys) {
// console.log(Object.keys(obj[prop]).length + " " + Object.keys(obj[prop]));
li.appendChild(traverseObject(obj[prop]));
} else {
li.className += "leaf";
}
ul.appendChild(li);
console.log(ul);
}
return ul;
},
sortedObject = function (obj) {
var ul = document.createElement("ul"),
li,span, sorted = [],
i = 0;
for (var prop in obj) {
sorted.push(prop);
}
sorted.sort();
for (; i < sorted.length; i++) {
li = document.createElement("li");
span = document.createElement("span");
span.innerHTML = sorted[i];
span.onclick = function(e) {
var classNames = e.currentTarget.className;
if (classNames.indexOf("hidden") == -1) {
e.currentTarget.className += "hidden";
} else {
e.currentTarget.className = e.currentTarget.className.replace("hidden", "");
}
e.stopPropagation();
}
li.appendChild(span);
if (typeof obj[sorted[i]] == "object" && objectKeys) {
// console.log(Object.keys(obj[sorted[i]]).length + " " + Object.keys(obj[sorted[i]]));
li.appendChild(sortedObject(obj[sorted[i]]));
} else {
li.className += "leaf";
}
ul.appendChild(li);
console.log(ul);
}
return ul;
};
window.onload = function () {
document.getElementById("dvList1").appendChild(traverseObject(dataSource));
document.getElementById("dvList2").appendChild(sortedObject(dataSource));
}