1

この質問は、この質問をさらに発展させたものです。

ManseUKによって優れた回答が得られたdiv （製品フィルタリング）を表示および非表示にするjQueryの単純なチェックボックス

ManseUKのソリューションでは、単一のカテゴリ、特にジャンルによる製品フィルタリングが可能でしたが、現在のプロジェクトでは、色とサイズの2つのカテゴリで並べ替える必要があります。ManseUKのソリューションを変更することで、ほぼ機能しますが、2つのフィルターを選択すると失敗します。この例では、「cyan」と「xl」を選択すると、xlシアンのみが表示され、代わりにxlシアンだけでなく両方のシアンが表示されます。私が使用しているコードは次のとおりです。

HTML：

<input type="checkbox" id="cyan" value="cyan" /> Cyan<br />
<input type="checkbox" id="magenta" value="magenta" /> Magenta<br />
<input type="checkbox" id="black" value="black" /> Black<br />
<input type="checkbox" id="xl" value="xl" /> XL<br />

<!--------------------->
<div class="products">
    <div class="productItem" data-price="250" data-category="cyan">
        Cyan Ink
        <div class="productItemPrice"><span>&pound;250</span></div>
    </div>
    <div class="productItem" data-price="150" data-category="magenta">
        Magenta Ink
        <div class="productItemPrice"><span>&pound;150</span></div>
    </div>
    <div class="productItem" data-price="250" data-category="black">
        Black Ink        <div class="productItemPrice"><span>&pound;250</span></div>
    </div>
    <div class="productItem" data-price="241" data-category="cyan" data-size="xl">
        XL Cyan Ink
        <div class="productItemPrice"><span>&pound;241</span></div>
    </div>
</div>
<!--------------------->​

CSS：

.productItem{float:left;padding:5px;margin:5px;border:1px solid #eaeaea}
body{font-family:verdana}

JS：

$('input[type="checkbox"]').click(function() {
    if ($('input[type="checkbox"]:checked').length > 0) {
        $('.products >div').hide();
        $('input[type="checkbox"]:checked').each(function() {
            $('.products >div[data-category=' + this.id + ']').show();
            $('.products >div[data-size=' + this.id + ']').show();
        });
    } else {
        $('.products >div').show();
    }
});​

上記のコードのJSFIDDLE

jsが論理和を実行していることがわかります-どのdivを表示するか-これをANDにするにはどうすればよいですか？

4

1 に答える 1

1

コードにいくつかの変更を加えました..

  • 変数をキャッシュしました。

  • すべてのチェックボックスをループして、それに ID を割り当てて
    います。別の
    エンティティであるため、サイズを個別にクエリする必要があります..

  • サイズではないチェックボックスのみをループしています..すべての色

  • それからチェックはサイズも各色チェック…

完全なコード

 $('input[type="checkbox"]').click(function() {
    // Cache These Variables
    var $checked = $('input[type="checkbox"]:checked');
    var $productsDiv = $('.products > div');
    var $sizeCheckBox = $('input[type="checkbox"][value="xl"]');

    if ($checked.length > 0) {
        $productsDiv.hide();
        // If only XL Checkbox is Checked
        if ($checked.length == 1 && $sizeCheckBox.is(':checked')) {
              $('.products > div[data-size=' + $sizeCheckBox.attr('id') + ']')
                 .show();
        } 
        // If Others are also Checked
        else {
            // All Checkboxes and Not Size Checkbox
            $checked.not($sizeCheckBox).each(function() {
                var dataSize = '';
                if ($sizeCheckBox.is(':checked')) {
                    dataSize = '[data-size=' + $sizeCheckBox.attr('id') + ']';
                }
                $('.products >div[data-category=' + this.id + ']' 
                             + dataSize).show();
            });
        }
    } else {
        $productsDiv.show();
    }
});​

フィドルをチェック

于 2012-11-08T16:53:56.947 に答える