1

製品のカテゴリをリストしているWebサイトがあります。

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つの製品の小さな例に短縮し、製品タイトルのリンクで「sale」という単語だけを検索しました。

4

1 に答える 1

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

要素を 2 回繰り返す必要はありません。1 回目はフィルタリング、2 回目は変更を適用します。

それほど多くの変数や奇妙なセレクターは必要ありません。チェーンを使用して、1 つの jQuery 関数で複数の要素にアクションを適用できる場合を学びます。

于 2013-03-21T21:39:58.643 に答える