フィルターを介して必要な結果を非表示にします

StackOverflow https://stackoverflow.com/questions/20353987

  •  25-08-2022
  •  | 
  •  

質問

それがすべて始まったところ： 私はすでにここでフィルターに1つの質問をしました： 既存の値セットからjQueryまたはjsを使用したフィルター結果

問題 ：
データは別のページから来ているので form post, 、すべての値が最初に見えるはずです......ユーザーはそのデータを通過でき、必要に応じてフィルターを使用して要件を整理する特権を持っています。

列車のように感じさせているのはなぜですかページ上の値（フィルタリングされる）は、デフォルトで表示されることになっています。 class="tv", 、 他のすべて div classes 含まれていない tv 隠す必要があります

どこで刺されているの？
私は論理的に正しいと思ったjQueryを解決しようとしましたが、結果は私にそうではありませんでした:(

以前の質問の問題
私の以前の質問はフィルタリングに役立ちました...しかし、データは hide() デフォルトで...リバースが必要でした。

努力とフィドル??
フィドル : http://jsfiddle.net/logintomyk/r6g3k/1/

HTML

<!-- filter checkboxes -->
    <input type="checkbox" id="wm" class="a" />WM
    <input type="checkbox" id="tv" class="a" />tv
    <input type="checkbox" id="ac" class="a" />ac
    <input type="checkbox" id="terrace" class="a" />terrace


    <br> <hr><br>

   <!-- Results to be filtered -->
    <div class="wm field">WM</div>
    <div class="tv field">TV</div>
    <div class="ac field">ac</div>
    <div class="terrace field">terrace</div>
    <div class="wm tv field">WM TV</div>
    <div class="wm tv ac field">wm tv ac</div>
    <div class="wm terrace field">wm terrace</div>
    <div class="tv field">tv</div>
    <div class="tv ac field">tv ac</div>

私のnoo jquery 

$(document).ready(function () {
     $('.field').show(); // to show values by default


    $(".a").change(function () {
        $('div').hide(); //hide before displaying
        $(':checkbox:not(:checked)').each(function() {
            $("." + this.id).hide(); //hide unchecked filter values
        });
    }).change();
});
役に立ちましたか？

解決

これは簡単かもしれません

var puts = $('.a');//get checkboxes
var cans = $('.field');//get content
puts.on('change', function() {//when checkbox changes
    if (!puts.filter(':checked').length) {//if nothing's checked
        cans.show();//show it all
    } else {//if something's checked
        cans.hide();//hide all
        puts.filter(':checked').each(function() {//get checked
            $('.'+this.id+':hidden').show();//show if hidden
        });  
    }
});

フィドルを作った： http://jsfiddle.net/filever10/f8vk2/

壊す

puts チェックボックスです

cans コンテンツブロックです

チェックボックスの状態が変更されると、現在チェックされていない場合、すべてが表示されます。何かがチェックされている場合、それはすべてのコンテンツブロックを隠し、に一致するクラスを持っているものを表示します id チェックボックスの。隠されているものだけを示すため、複数のチェックボックスに適用されるコンテンツブロックで複数回表示する必要はありません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top