0

私は次のコードを持っています(JSFIDDLEでも稼働しています: http://jsfiddle.net/DSuua/12/ )

価格の一致に基づいて製品を並べ替えます。その価格帯内に製品がない場合、ページの読み込み時に左側のパネルリストからフィルターオプションを完全に非表示にしたい(今のように、価格帯を表示するのではなく)。

たとえば、10 ～ 20 の価格帯に商品がない場合、左パネルの「$10 ～ $20」は無関係であり、「一致するものが見つかりませんでした」という迷惑なメッセージが表示されるだけなので、非表示にします。

現在、フィルタリングはクリック イベントで実行されます。フィルタリングを行う前に、まずリストの属性値 (名前、タイトル) を製品価格の値 (最低価格と最高価格) と照合し、一致する範囲が見つからない場合は、それらのフィルター項目をリストから非表示にする必要があります。

クライアント側のみでこのソリューションに制限されています。

また、このコードを改善するための全体的なヒントも歓迎します。

HTML:

<ul id="filterByPrice">    
    <li><span class="section-header">PRICE</span></li>    
    <li><a href="#" title="">Any Price</a></li>
    <li><a href="#" name="0" title="9">Under $10</a></li>
    <li><a href="#" name="10" title="19">$10 - $20</a></li>
    <li><a href="#" name="20" title="29">$20 - $30</a></li>
    <li><a href="#" name="30" title="39">$30 - $40</a></li>
    <li><a href="#" name="40" title="49">$40 - $50</a></li>
    <li><a href="#" name="50" title="9999">Over $50</a></li>
</ul>

<ul id="products">
    <li>
        <a href="/product-one">Product One</a><br>
        <span id="lowestPriceRange">0</span>
        <span id="highestPriceRange">9</span>
    </li>
    <li>
        <a href="/product-two">Product Two</a><br>
        <span id="lowestPriceRange">20</span>
        <span id="highestPriceRange">29</span>
    </li>
    <li>
        <a href="/product-three">Product Three</a><br>
        <span id="lowestPriceRange">30</span>
        <span id="highestPriceRange">39</span>
    </li>
    <div id="nothingFound" style="display:none;">
        Nothing found
    </div>
</ul>

CSS:

#filterByPrice, #products {
 border:1px solid #ccc;
 padding:10px;  
 width:100px; 
 margin:10px; 
 float:left;
 position:relative;   
}

JS:

var noProductMatches = $('#nothingFound');

$('#filterByPrice li a').click(function() 
{
    noProductMatches.hide();

    var priceRangeSelectedItem = $(this).html().toLowerCase();
    var minSelectedPrice = parseInt( $(this).attr("name") );
    var maxSelectedPrice = parseInt( $(this).attr("title") );
    var productContainer = $('#products li');

    if (priceRangeSelectedItem == 'any price')
    {
        productContainer.fadeOut("slow");
        productContainer.delay(100).fadeIn("slow");
    }
    else
    {
        var results = productContainer
            .fadeOut(100)
            .delay(100)
            .filter(function() 
            {
                var minProductPrice = parseInt( $(this).find("#lowestPriceRange").html().toLowerCase() );
                var maxProductPrice = parseInt( $(this).find("#highestPriceRange").html().toLowerCase() );

                return (minProductPrice >= minSelectedPrice &&  maxProductPrice <= maxSelectedPrice);
            })
            .each(function(index, item) 
            {
                $(item).fadeIn("slow");
            });

            if (results.length == 0)
            {
                noProductMatches.fadeIn();
            }
    }
});
​

</p>

4

1 に答える 1

3

まず、ページには特定の id の HTML 要素を 1 つだけ持つ必要があるため、highestPriceRangeとlowestPriceRangeはクラスである必要があります。第二に、これはサーバー側で行う方が簡単なように思えますが、クライアント側で行う必要がある場合は、これでうまくいくはずです:

var hidePrices = {};
hidePrices[0] = true;
hidePrices[10] = true;
hidePrices[20] = true;
hidePrices[30] = true;
hidePrices[40] = true;
hidePrices[50] = true;

$('#products').find('span').each(function(i, el){
    // round price down to nearest 10s
    var key = parseInt(Math.floor($(this).html() / 10) * 10, 10);
    hidePrices[key] = false;
});

$('#filterByPrice').find('li').each(function(i, el){
    if (hidePrices[Number($(this).find('a').attr('name'))]) {
        $(this).hide();
    }
});

デモを見る

于 2012-05-22T03:54:37.473 に答える