Question

我有一个网站列出了一类产品。

使用jQuery，我正在查看每个产品的标题链接，并过滤掉任何带有“sale”，“clearance”或“new”字样的内容。

然后，根据我收到的结果，我在产品缩略图上添加了“促销”，“清仓”或“新”横幅图片。

当我的脚本只在标题链接中找到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个产品的较小示例，并在产品标题链接中搜索“sale”一词。

Answer 1

我不明白你为什么要使用这样的选择器。编写jQuery代码的方式可能存在性能问题。为什么不试试这样的事情：

// Set CSS position to relative for each thumbnail container
$('.ProductImage').css('position','relative');

// Search for all SALE products by finding the word "sale" in the title element
$('div.product a.title').each(function() {
    if ($(this).text().toLowerCase().indexOf('sale') != -1) {
        $(this)
            .parent()
            // Select the thumbnail image for each parent
            .find('a img')
            // Insert "SALE" ribbon before each thumbnail for products with "sale" in the title element
            .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

您不需要对元素进行两次迭代。第一次进行过滤，第二次进行更改。

您不需要这么多变量和奇怪的选择器。使用链接并学习何时可以使用一个jQuery函数将操作应用于多个元素。

jQuery过滤器函数导致无响应的脚本

1 个答案: