我有一个列出产品类别的网站。
使用 jQuery,我正在查看每个产品的标题链接并过滤掉任何带有“销售”、“清仓”或“新”字样的内容。
然后,根据我收到的结果,我在产品缩略图上添加“销售”、“清仓”或“新”横幅图像。
当我的脚本在标题链接中只找到 1 或 2 个带有这些词的产品时,这似乎工作得很好,但是如果我尝试在一个页面上运行我的脚本,比如说 20 个产品,我的浏览器会冻结并且我得到一个无响应的脚本警告。
有人会介意看看我下面的代码,看看我是在哪里引起这个问题的吗?据我所知,似乎我试图在每个结果中多次叠加“横幅”图像,我相信这是导致我的脚本变得无响应的原因。
这是我的 jQuery 代码:
// Set CSS position to relative for each thumbnail container
$('.ProductImage').css('position','relative');
// Find the title for each product on the page
var $title = $('div.product a.title');
// START SALE PRODUCTS
var theSaleTitle = $($title);
// Search for all SALE products by finding the word "sale" in the title element
var iSale = $(theSaleTitle).filter(function() {
return $(this).text().trim().toLowerCase().indexOf('sale') != -1;
});
$(iSale).each(function(){
// Select each matching title element's parent
var parentSale = $(iSale).parent();
// Select the thumbnail image for each parent
var Sale = $('a img', parentSale);
// Insert "SALE" ribbon before each thumbnail for products with "sale" in the title element
$(Sale).each(function() {;
$('a img', parentSale).before("<img style='position:absolute;top:-3px;left:-3px;border:0;' src='/content/images/sale-ribbon.png'/>");
});
// Remove the word "Sale" from the product title for each sale product
$(this).html($(this).html().replace(/sale/ig,''))
});
// END SALE PRODUCTS
这是我的示例 HTML 代码:
<div class="product">
<a href="#"></a><div data-product="4318" class="ProductImage QuickView" style="position: relative;"><a href="#">
</a><a href="/sigep-black-mega-flag-tee/"><img alt="SigEp Black Mega Flag Tee" src="/products/4318/images/2369/052183__14662.1363380086.230.230.jpg"></a>
<div class="QuickViewBtn" style="background: -moz-linear-gradient(center top , rgb(247, 247, 247), rgb(220, 219, 219)) repeat scroll 0% 0% transparent; color: rgb(0, 0, 0); display: none; margin: 0px; top: 96.5px; left: 60px;" data-product="4318">Quick View</div>
</div>
<a class="title " href="/sigep-black-mega-flag-tee/">sale SigEp Black Mega Flag Tee</a>
<span class="price">$19.95</span>
</div>
如果我可以提供任何进一步的信息来帮助解决问题,请告诉我,感谢您的关注!
更新:如要求,我已将我的代码缩短为 1 个产品的较小示例,并在产品标题链接中仅搜索“销售”一词。