2

我为我的网站下载了一个 livesearch JavaScript 插件，它可以正常工作，但我需要帮助对其进行一些修改。

这是代码：

    $.ajax({url: $('base').attr('href') + 'index.php?route=product/search/ajax&keyword=' + keywords, dataType: 'json', type: 'GET', success: function(result) {
    if( result.length > 0 ) {
        var eList = document.createElement( 'ul' );
        eList.id = 'livesearch_search_results';
        var eListElem;
        var eLink;
        var eHref;
        for( var i in result ) {
            eListElem = document.createElement( 'li' );
            eLink = document.createElement( 'a' );
            if( result[i].img != null ) {
                var eImg = document.createElement( 'span' );
                eImg.className = "img_container";
                var img = new Image();
                img.src = result[i].img;
                eImg.appendChild( img );
            }
            else {
                eImg = document.createElement( 'span' );
                eImg.innerHTML = ' ';
            }
            eDiv = document.createElement( 'div' );
            eLink.appendChild( document.createTextNode(result[i].name) );
            if( typeof(result[i].href) != 'undefined' ) {
                eHref = result[i].href;
            }
            else {
                eHref = $('base').attr('href') + 'index.php?route=product/product&product_id=' + result[i].product_id + '&keyword=' + keywords;
            }
            eLink.href = eHref;
            eDiv.appendChild( eLink );
            eDiv.innerHTML = eDiv.innerHTML + result[i].desc;
            eListElem.appendChild( eImg );
            eListElem.appendChild( eDiv );
            eListElem.appendChild( document.createElement('br') );
            eListElem.setAttribute( 'rel', eHref );
            $(eListElem).bind('click', function(){
                var gto = $(this).attr( 'rel' );
                try {
                    if( gto != false && gto.length > 0 ) {
                        document.location = gto;
                    }
                }
                catch( e ) {}
            });
            eList.appendChild( eListElem );
        }
        if( $('#livesearch_search_results').length > 0 ) {
            $('#livesearch_search_results').remove();
        }
        $('#search_menu').append(eList);
    }
}});

输出是这样的（不带<ul>）：

  <li rel="http://url">
  <span class="img_container">
    <img src="http://url.jp">
  </span>
  <div>
    <a href="http://url">MONS 1.0 (CTM 2013)</a>
    Description...</div>
  <br>
  </li>

有没有办法将输出修改为：

  <li rel="http://url">
  <a href="http://url">           <---- <a> tag here
  <span class="img_container">
    <img src="http://url.jp">
  </span>
  <span class="product-container">    <------ <span> tag here
    <span class="title">MONS 1.0 (CTM 2013)</span> <------ <span> tag here, remove <a> tag
    <span class="description">Description...</span> <------ <span> tag here
  </div>
  </a>
  </li>

这超出了我的 JS 知识范围。

非常感谢

4

1 回答 1

3

在严重的免责声明中，这是未经测试的，我会说是的！

代码被整齐地划分，易于阅读，让我们保持这种精神。

在顶部，我们看到以下内容：

var eList = document.createElement( 'ul' );
eList.id = 'livesearch_search_results';
var eListElem;
var eLink;
var eHref;

这些变量已声明但未定义。它们将被一遍又一遍地用于构建每个<li>. 我们正在移动链接 ( eLink) 以便我们可以保留它，但我们也将 a 更改<div>为 a <span>，并添加了几个其他元素；即产品容器、标题和描述。让我们为这些变量添加一些变量，而我们在这里（原作者似乎没有在这里定义，无论如何eDiv我们将用 替换它）：ePCont

var eList = document.createElement( 'ul' );
eList.id = 'livesearch_search_results';
var eListElem;
var eLink;
var eHref;
var ePCont, eTitle, eDesc;

下一步是双重的。

首先我们看到一堆document.createElements（一些在 if 语句中，一些不是）。 document.createElement创建指定类型的新 DOM 元素。它不会将元素添加到文档中，它只是构建它的一个实例，因此它们的创建顺序无关紧要。这将我们带到第二部分： [element].appendChild([element])将树中的一个元素放在另一个元素之下。如果该树中的某个元素属于该文档，则会显示该元素。这意味着首先我们将创建一系列对象，然后将它们相互添加，最后将最顶层的元素添加到文档中。

我们将彻底重写这段代码的大部分，但第一部分（通过创建图像的位置）就可以了：

        eListElem = document.createElement( 'li' );
        eLink = document.createElement( 'a' );
        if( result[i].img != null ) {
            var eImg = document.createElement( 'span' );
            eImg.className = "img_container";
            var img = new Image();
            img.src = result[i].img;
            eImg.appendChild( img );
        }
        else {
            eImg = document.createElement( 'span' );
            eImg.innerHTML = '&nbsp;';
        }

下一行定义了我们现在调用的容器 div ePCont，让我们适当地重写它（并给它一个类）：

ePCont = document.createElement( 'span' );
ePCont.className = "product-container";

THAT 之后的行在链接中放置了一些文本。我们将一个元素放入其中，因此我们可以安全地删除它，但之后的 if 语句（确保我们将使用犹太 url）保持：

        if( typeof(result[i].href) != 'undefined' ) {
            eHref = result[i].href;
        }
        else {
            eHref = $('base').attr('href') + 'index.php?route=product/product&product_id=' + result[i].product_id + '&keyword=' + keywords;
        }
        eLink.href = eHref;

最后，让我们创建两个新的 span：

eTitle = document.createElement( 'span' );
eDesc = document.createElement( 'span' );

并填充它们：

eTitle.appendChild( document.createTextNode(result[i].name) );
eDesc.appendChild( document.createTextNode(result[i].desc) );

并设置他们的课程：

ePCont.className = "title";
ePCont.className = "description";

现在是时候将所有内容附加到其他所有内容上。我们将从最低的元素开始，然后向上工作。

ePCont.appendChild(eTitle);
ePCont.appendChild(eDesc);
eLink.appendChild(eImg);
eLink.appendChild(ePCont);
eListElem.appendChild(eLink);

文档的其余部分应该或多或少地像它那样流动：

    eListElem.setAttribute( 'rel', eHref );
    $(eListElem).bind('click', function(){
        var gto = $(this).attr( 'rel' );
        try {
            if( gto != false && gto.length > 0 ) {
                document.location = gto;
            }
        }
        catch( e ) {}
    });
    eList.appendChild( eListElem );

    ...

同样，完全未经测试，但我希望我的描述能让您对该插件的工作原理有足够的了解，以便解决它！

于 2012-12-05T20:19:01.453 回答