1
我正在使用javascript和jquery的組合來搜索和顯示xml文件的結果。結果顯示爲縮略圖，點擊時應該在jquery colorbox中顯示更多信息。 colorbox中的信息來自內聯隱藏div（#affInfo）。我試圖使用縮略圖中的定位標記上定義的onmouseover事件來追加一個新的div（pWindow）到隱藏的div。這是行不通的，螢火蟲控制檯返回元素列表 showInfo（[object HTMLDivElement]）後的錯誤說「缺少」「appendchild鼠標懸停
請看看我的代碼，並建議如何解決此錯誤。
<head>
<script type="text/javascript">
$(document).ready(function(){
//global vars
var searchBoxes = $(".text");
var searchBox1 = $("#searchme");
//Effects for both searchbox
searchBoxes.focus(function(e){
$(this).addClass("active");
});
searchBoxes.blur(function(e){
$(this).removeClass("active");
});
//Searchbox1, set focus when document is ready
searchBox1.focus();
$("#searchme").autocomplete(affiliates);
});
</script>
<script type="text/javascript">
window.onload = loadIndex;
function loadIndex() { // load indexfile
// most current browsers support document.implementation
if (document.implementation && document.implementation.createDocument) {
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.load("US_affiliates.xml");
}
// MSIE uses ActiveX
else if (window.ActiveXObject) {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.load("US_affiliates.xml");
}
}
function showInfo(affText) {
document.getElementById('affInfo').appendChild(affText);
}
function searchIndex() { // search the index (duh!)
if (!xmlDoc) {
loadIndex();
}
// get the search term from a form field with id 'searchme'
var searchterm = document.getElementById("searchme").value;
var allitems = xmlDoc.getElementsByTagName("Affiliate");
results = new Array;
if (searchterm.length < 3) {
document.getElementById('error').innerHTML = "Enter atleast 3 characters";
} else {
for (var i=0;i<allitems.length;i++) {
// see if the XML entry matches the search term,
// and (if so) store it in an array
var name = allitems[i].lastChild.nodeValue;
var exp = new RegExp(searchterm,"i");
if (name.match(exp) != null) {
results.push(allitems[i]);
}
}
document.getElementById('error').innerHTML = " ";
var label=document.getElementById('result');
while(label.hasChildNodes()) {
label.removeChild(label.lastChild);
}
// send the results to another function that displays them to the user
showResults(results, searchterm);
}
}
// Write search results to a table
function showResults(results, searchterm) {
if (results.length > 0) {
$('#content').triggerTab(2);
var xy = results.length;
document.getElementById('error').innerHTML = xy + ' ' + 'results found for' + ' ' + '<strong>' + searchterm + '</strong>';
var box = document.getElementById('result');
for(var i=0; i<results.length; i++) {
var container = document.createElement('div');
var img = results[i].getAttribute("logo");
var name = results[i].getAttribute("name");
var id = results[i].getAttribute("id");
var ch = results[i].getAttribute("custom_header");
var cn = results[i].getAttribute("custom_left_nav");
var xp = results[i].getAttribute("is_xml_partner");
var type;
if (img == null){
ch = "No Co-branding";
}
if (cn == null){
cn = "No Custom Links";
}
if (xp != null){
type = "XML Partner";
}else
{
type = "OEM Partner"
}
var icn = document.createElement('div');
if(ch && cn && xp !== null){
icn.setAttribute('id', "abc");
}
else if(ch && cn !== null){
icn.setAttribute('id', "ab");
}
else if(ch!==null){
icn.setAttribute('id', "a");
}
else if(ch && xp !== null){
icn.setAttribute('id', "ac");
}
else if(cn!== null){
icn.setAttribute('id', "b");
}
else if(cn && xp !== null){
icn.setAttribute('id', "bc");
}
else if(xp!== null){
icn.setAttribute('id', "c");
}
else {
icn.setAttribute('id', "def");
}
var newpara = document.createElement('p');
newpara.innerHTML = '<span>' + '<strong>' + name + '</strong>' + '<br> ' + '(' + id + ')' + '</span>';
var newdiv = document.createElement('div');
var divIdName = 'aff'+i;
newdiv.setAttribute('id',divIdName);
var pWindow = document.createElement('div');
pWindow.setAttribute('id','affdetail');
pWindow.innerHTML = '<h3>' + 'Customizations' + '</h3>' + '<br/>' + '<span>' + 'Affiliate:' + ' ' + '<strong>' + name + '</strong>' + '</span>' + '<br/>' + '<span>' + 'Type:' + '<strong>' + type + '</strong>' + '</span>' + '<br/>' + '<span>' + 'ID:' + ' ' + '<strong>' + id + '</strong>' + '</span>' + '<br/>' + '<span>' + 'Co-Branding:' + ' ' + '<strong>' +ch + '</strong>' +'</span>' + '<br/>' + '<span>' + 'Custom Left Nav:' + ' ' + '<strong>' + cn + '</strong>' + '</span>' + '<h3>' + 'Packages' + '</h3>' + '<br/>' + '<ul>' + '<li>' + 'Package1' + '</li>' + '<li>'+ 'Package2' + '</li>' + '</ul>';
newdiv.innerHTML = '<a onClick="' + 'showInfo(' + pWindow + ')' + '"' + ' ' + 'href="#' + '"' + 'class="' + 'pop' + '"' + '>' + 'showpopup' + '</a>';
container.appendChild(newdiv);
container.appendChild(icn);
container.appendChild(newpara);
box.appendChild(container);
$(".pop").colorbox({width:"50%", inline:true, href:"#affInfo"});
}
} else {
// else tell the user no matches were found
document.getElementById('error').innerHTML = 'No results found for '+searchterm+'!';
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="result">
</div>
</div>
</div>
<div class="tempBox">
<div id="affInfo" style='padding:10px; background:#fff;'>
</div>
</div>
我認爲這是一個壞主意，因爲每次onmouseover事件觸發時，可能在單個頁面中出現很多次，DOM元素的一個實例將被追加到該隱藏元素。你試圖用這個來達到什麼目的？ – 2009-08-25 08:12:58
如果您添加標籤，此線程也會獲得更多關注：javascript和jquery – 2009-08-25 08:15:08
添加了奧斯汀建議的標籤。 – RuudKok 2009-08-25 08:16:58