1

このfind関数をチェックボックスで正しく機能させるのに問題があります。チェックボックスを選択できなかったため、ステートメントを削除するように言われました。それreturn false;が原因かどうかはわかりませんが、ステートメントif (attrColor == 'All'){...}は機能しなくなりました。

チェックボックスが選択されている場合にすべてを表示するなど、チェックボックスで機能するようにこの関数を変更するにはどうすればよいですか？

関数の簡単な例を含むフィドルをここに投稿しました：http：//jsfiddle.net/chayacooper/WZpMh/92/

$(document).ready(function () {
    var selected = [];
    $('#attributes-Colors *').click(function () {
        var attrColor = $(this).data('color');
        var $this = $(this);
        if ($this.parent().hasClass("active")) {
            $this.parent().removeClass("active");
            selected.splice(selected.indexOf(attrColor),1);
        }
        else {
            $this.parent().addClass("active");
            selected.push(attrColor);
        }
        if (attrColor == 'All') {
            $('#content').find('*').show();
        } else {
        $("#content").find("*").hide();
        $.each(selected, function(index,item) {
            $('#content').find('[data-color *="' + item + '"]').show();
        });
        }
        // Removed this to allow checkboxes to accept input
        //return false;
    });
});
4

1 に答える 1

0

チェックボックスのみを対象とし、アステリックスセレクターのようにすべての要素を対象とするわけではなく、チェックボックスに「変更」イベントを使用します。

次に、変数内のすべてのli要素を取得し、lisそれらすべてを同時に非表示にします。

チェックされたすべてのチェックボックスの色を。で配列にマップします$.map。

isAllその配列の値「All」をチェックして、そのチェックボックスがチェックされているかどうか、チェックされていないかどうか、つまり長さがnullであるかどうかを確認します。li'sそうでない場合は、チェックされたチェックボックスの色を、で繰り返し、$.each表示します。選択した色に一致するlisのいずれか。

$(document).ready(function () {
    $('#attributes-Colors input[type="checkbox"]').on('change', function () {
        var lis = $('#content li').hide(),
            check = $.map($('#attributes-Colors input[type="checkbox"]'), function (el,i) {
                if (el.checked) return $(el).data('color');
            }),
            isAll = $.inArray('All', check) != -1;

        if (check.length && !isAll) {
            $.each(check, function(i,color) {
                lis.filter(function() {
                    return $(this).data('color').indexOf(color) != -1
                }).show();
            });
        } else {
            lis.show();
        }
    });
});

フィドル

于 2013-03-27T07:58:35.403 に答える