Question

我正在使用javascript和jquery的组合搜索并显示xml文件的结果。结果显示为缩略图，点击后应在jquery colorbox中显示更多信息。 colorbox中的信息来自内联隐藏div（#affInfo）。我正在尝试使用缩略图中锚标记上定义的onmouseover事件将新div（pWindow）附加到隐藏的div。这不起作用，并且firebug控制台在元素列表后返回错误说“缺少” showInfo（[object HTMLDivElement]）“

请查看我的代码并建议如何解决此错误。

<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>

Answer 1

你应该考虑只用jQuery重写它，你至少要缩短它2/3 ......

如果我理解的话，使用缩略图动态地将锚标签放入页面中，并且当它出现时，你希望它上面的鼠标悬停事件在一些现有的DOM元素中添加一个新的DIV（让我们称之为myDOMEle）。我没有在你的代码中找到任何锚点的痕迹，但看起来并不深刻。就像是 $("a").mouseover(function(){ $(myDOMEle).append(myNewContent); }); 如果在每个新缩略图出现后调用它，它应该可以工作。

您也可以将其设置为缩略图功能的回调功能。

此外，您可以使用livequery定义每次在DOM中插入新A标记（或具有给定类的新标记）时应用的函数。

Answer 2

猜测鼠标悬停方法无法正常工作。相反，我可以修改这个jquery代码，用于将colorbox每次都指向new div。

$(".pop").colorbox({width:"50%", inline:true, href:"#affInfo"});

它当前指向一个隐藏的div（#affInfo）而不是我希望指向动态生成的div，如＃affInfo1，＃affInfo2等，并将其与缩略图的onclick事件相关联。

在鼠标悬停上追加儿童

2 个答案: