1

私はほとんどそこにある製品フィルターを機能させようとしています。私は、ユーザーがシャツを選択できるようにしたいと考えています。これにより、すべてのシャツが表示され、次にすべての青いシャツが表示される青が表示され、次にピンクをチェックすると、すべての青とピンクのシャツが表示されます。現時点では、すべての条件が真である場合にのみ表示できますが、そのデータセットのいずれかが真である場合に表示したい

私のフィドルはここにあります

http://jsfiddle.net/ktcle/2keVN/2/

$('div.tags').delegate('input[type=checkbox]', 'change', function()
{
var $lis = $('.results > li'),
    $checked = $('input:checked');

if ($checked.length)
{
    var selector = $checked.map(function ()
    {
        return '.' + $(this).attr('rel');
    }).get().join('');

    $lis.hide().filter(selector).show().addClass("show");     
}
else
{
    $lis.show().removeClass("show");
}
});
4

2 に答える 2

0

これを試して：

編集:排他的にフィルタリングできるようにメソッドを変更しました。このようにして、たとえば緑やピンクのシャツやズボンでフィルタリングできます。

$(function(){
    $('div.tags').delegate('input[type=checkbox]', 'change', function()
    {
        var $lis = $('.results > li'),
            $types = $('.filter-grp-type input:checked'),
            $colors = $('.filter-grp-color input:checked');

        if ($types.length)
        {
            var selector = $types.map(function ()
            {
                return '.' + $(this).attr('rel');
            }).get().join(', ');

            $lis.hide().filter(selector).show();     
        }
        else
        {
            $lis.show();
        }

        $lis = $lis.filter(":visible");

        if ($colors.length)
        {
            var selector = $colors.map(function ()
            {
                return '.' + $(this).attr('rel');
            }).get().join(', ');

            $lis.hide().filter(selector).show();     
        }
    });
})

「セレクター」文字列を作成していたときは、それを連結しているだけでした。jQuery は、セレクターにすべてのクラスを持つアイテムのみをフィルター処理します。

私はデビッド・トーマスに同意します。むしろ、衣服タイプの選択を相互に排他的なもの、つまりラジオ ボタンにします。

于 2012-07-09T14:00:39.110 に答える
0

最初に HTML を変更して、衣類の 1 つのカテゴリのみを選択することを反映することをお勧めします (したがって、 を使用します<input type="radio" />)。

  <div class="tags">
   <fieldset class="filter-grp">
    <label><input type="radio" rel="skirt" name="year" /> skirt </label><br>
    <label><input type="radio" rel="trousers" name="year" /> trousers </label><br>
    <label><input type="radio" rel="shirt" name="year" /> shirt </label><br>
    </fieldset>
  <br>
  <fieldset class="filter-grp">
    <label><input type="checkbox" rel="blue" name="type"  /> blue</label><br>
    <label><input type="checkbox" rel="pink" name="type"  /> pink</label><br>
    <label><input type="checkbox" rel="green" name="type"  /> green</label><br>
   </fieldset>
   <br>
</div>

<ul class="results">
   <li class="blue skirt"> blue skirt</li>
   <li class="pink shirt">pink shirt</li>
   <li class="pink skirt">pink skirt</li>
   <li class="blue shirt">blue shirt</li>
   <li class="blue trousers">blue trousers</li>
   <li class="green skirt">green skirt</li>
   <li class="blue shirt">blue shirt</li>
   <li class="pink trousers">pink trousers</li>
   <li class="blue trousers">blue trousers</li>
   <li class="blue skirt">blue skirt</li>
   <li class="green shirt">green shirt</li>
</ul>    ​

次の jQuery を使用します。

$(function() {
    $('div.tags').delegate('input[type=checkbox],input[type=radio]', 'change', function() {
        var $lis = $('.results > li'),
            $category = $('input:radio:checked')
            .attr('rel'),
            $colors = $('input:checkbox:checked'),
            selectors = $colors.map(
                function(){
                    return '.' + $category + '.' + $(this).attr('rel');
                }).get().join(', ');
        if ($category.length && $colors.length) {
                        $lis
                            .hide()
                            .filter(selectors)
                            .show()
                            .addClass("show");
        }
        else {
            $lis.show().removeClass("show");
        }
    });
})​​

JS フィドルのデモ。

于 2012-07-09T14:03:47.650 に答える