1

特定のクラスで特定の div を除外する関数を作成する方法についてのヘルプを探しています。

基本的に、 e コマースの簡単な例をまとめました。値を持つさまざまなフィルターのリストがあります。それから製品があります。各製品 div には、「グリーン」、「アダルト」、「ウール」など、いくつかのクラスが適用されています。これらはフィルター可能なパラメーターです。

私は何かを書こうとしていますが、何かアドバイスを探しています。これが基本的に私が求めているものです：

  1. すべてを表示することから始めます
  2. ユーザーが GREEN を選択すると、GREEN 属性を持たないすべてのアイテムが表示されますdisplay:none(フェード トランジションあり)。
  3. チェックされた属性の Rep #2

注: 複数の属性をチェックできます。アイテムのチェックを外すと、すべてを再表示する必要があります。

何か助けはありますか？基本的に、各チェックボックスの値をクラスにリンクしていると思います。

コード的にこれを行うためのより良い方法があるかどうかはわかりません...おそらくデータ属性ですか？

コードの実際の例(明らかに JS はありません)

4

2 に答える 2

2

フィドルを更新し、jQuery を追加して、クラスが選択したチェックボックスと一致しない div を非表示にしました。

デモ:フィドル

JS は少し冗長ですが、必要に応じてさらにリファクタリングできます。

$(document).ready(function() {
    var allSelectedClasses;
    allSelectedClasses = '';
    $('input[type="checkbox"]').click(function(){
        //ensure the correct classes are added to the running list
        if(this.checked){
            allSelectedClasses += '.' + $(this).val();
        }else{
            allSelectedClasses = allSelectedClasses.replace($(this).val(), '');
        }        
        //format the list of classes
        allSelectedClasses = allSelectedClasses.replace(' ', '');
        allSelectedClasses = allSelectedClasses.replace('..', '.');
        var selectedClasses;
        var allSelected;
        allSelected = '';

        //format these for the jquery selector
        selectedClasses = allSelectedClasses.split(".");
        for(var i=0;i < selectedClasses.length;i++){
            var item = selectedClasses[i];
            if(item.length > 0){
                if(allSelected.length == 0){
                    allSelected += '.' + item;
                }else{
                    allSelected += ', .' + item;
                }
            }
        }
        //show all divs by default
        $("div.prodGrid > div").show();
        //hide the necessary ones, include the 2 top level divs to prevent them hiding as well
        if(allSelected.length > 0){
            $("div.prodGrid > div:not(" + allSelected + ")").hide();
        }
    });
});
于 2013-04-22T14:25:30.207 に答える
0

あなたのColorsULに新しいクラスを追加しました。それが大丈夫であることを願っています。

これはフィルタリング関数の大まかなバージョンです。色のみが考慮されるため、すべてを考慮して自分で変更する必要がありますが、基本的なアウトラインはそこにあります。

大量にリファクタリングできます！:)

jQueryを使用しているため：

$('ul.colorFilter li input[type="checkbox"]').click(function(){
    var checkedBoxes = $('ul.colorFilter li input[type="checkbox"]:checked');
    var listOfClasses = [];
    checkedBoxes.each(function(index, el){
        listOfClasses.push(el.value);
    });
    if(listOfClasses.length >= 1){
        $('div.prodGrid').children('div').hide();

        for(var i = 0; i < listOfClasses.length; i++){
            $('div.prodGrid > div.'+listOfClasses[i]).show();
        }
    } else {
        $('div.prodGrid > div').show();
    }
});

私もフィドルを作りました：

http://jsfiddle.net/Z9ZVk/4/

于 2013-04-22T14:32:44.533 に答える