製品のカテゴリをリストしている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」という単語だけを検索しました。