1
javascript와 jquery의 조합을 사용하여 xml 파일의 결과를 검색하고 표시하고 있습니다. 결과는 jquery colorbox에서 더 많은 정보를 가져와야하는 축소판으로 표시됩니다. colorbox의 정보는 인라인 숨겨진 div (#affInfo)에서 가져옵니다. 축소판의 앵커 태그에 정의 된 onmouseover 이벤트를 사용하여 숨겨진 div에 새 div (pWindow)를 추가하려고합니다. 이것은 작동하지 않으며 방화 광 콘솔은 요소 목록 뒤에 "missing"이라는 오류를 반환합니다. showInfo ([object HTMLDivElement]) "appendchild on mouseover
제 코드를 살펴보고이 오류를 해결할 수있는 방법을 제안하십시오.
<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 요소의 인스턴스가 숨겨진 요소에 추가되기 때문에 이것이 잘못된 생각이라고 생각합니다. 이 목적을 달성하려는 목적은 무엇입니까? –
태그를 추가하면이 스레드도 더 많은 관심을 갖습니다. javascript 및 jquery –
은 Austin이 제안한대로 태그를 추가했습니다. – RuudKok