2

この関数を使用すると、ユーザーは製品を色でフィルタリングできます（を使用data-attributes）。複数の値に対応するように変更するにはどうすればよいですか？

データ属性の値のいずれかに一致するすべてのアイテムを返し、フィルターの1つが削除されたときに（特定の値またはすべての色の値のチェックを外すことによって）残りのフィルターのより厳しい基準に戻す関数が必要です。関数の簡単な例を含むフィドルをここに投稿しました：http：//jsfiddle.net/chayacooper/WZpMh/21/。フィドルには現在data-attributes内部<li>タグがありますが、複数選択できるようにするためにチェックボックスを使用したいと思います。

編集-製品はデータカラー（つまり、黒、白）で価値以上のものを持つことができ、どちらの色でも利用できることを示し、マルチカラー（つまり、白黒）にすることができます。

の代わりにの$(this).data('color')ようなものを使うべきだと思いますが$('input:checkbox:checked').data('color')、それをどのように構成するかわかりません。

$(document).ready(function () {
    $('#attributes-Colors *').click(function () {
        var attrColor = $(this).data('color');
        $('#attributes-Colors').removeClass('active');
        $(this).parent().addClass('active');
        if (attrColor == 'All') {
            $('#content').find('*').show();
        } else {
            $('#content').find('li:not([data-color="' + attrColor + '"])').hide();
            $('#content').find('[data-color ~="' + attrColor + '"]').show();
        }
        return false;
    });
});
4

1 に答える 1

1

これを行う1つの方法は次のとおりです。

http://jsfiddle.net/WZpMh/20/

「すべての色」リンクの処理は追加しませんでしたが、簡単に実行できるはずです。

    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);
        }
        $("#content").find("*").hide();
        $.each(selected, function (index, item) {
            $('#content').find('[data-color ~="' + item + '"]').show();
        });
        return false;
    });

基本的な考え方は、選択した色の配列を保持することです。カラーボタンのいずれかがクリックされると、すべてのアイテムが非表示になり、selected配列内のすべての色に一致するアイテムが再表示されます。

の場合は、all colorsロジックを追加するだけで、他のすべてのアイテムを空白にして、すべてのアイテムを表示できます。

于 2013-03-25T20:52:59.387 に答える