gpt4 book ai didi

Javascript createElement,修改输出

转载 作者:行者123 更新时间:2023-11-27 22:36:04 27 4
gpt4 key购买 nike

我为我的网站下载了一个 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 知识范围。

非常感谢

最佳答案

关于未经测试的严重免责声明,我会说!

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

在顶部,我们看到以下内容:

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

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

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

下一步有两个步骤。

首先我们看到一堆document.createElement s(有些在 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 语句(确保我们将使用 kosher 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 );

...

同样,完全未经测试,但我希望我的描述能让您充分了解此插件的工作原理,以便解决问题!

关于Javascript createElement,修改输出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13731121/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com