إخفاء النتائج غير المطلوبة من خلال المرشحات

Question

حيث بدأ كل شيء : لقد طرحت بالفعل سؤالًا واحدًا على المرشحات هنا: نتيجة التصفية باستخدام jQuery أو JS من مجموعة قيمة موجودة

مشكلة :
نظرًا لأن البيانات تأتي من صفحة أخرى من خلال form post, ، من المفترض أن تكون جميع القيم مرئية في البداية ...... حتى يتمكن المستخدم من المرور عبر هذه البيانات وإذا لزم الأمر ، لديه امتياز لاستخدام المرشحات لفرز المتطلبات.

ما الذي يجعلني أشعر وكأنني قطارهل من المفترض أن تكون القيم (المراد ترشيحها) في الصفحة مرئية افتراضيًا ثم عندما ينقر المستخدم على Say class="tv", ، كل شيء آخر div classes التي لا تحتوي tv يجب أن يختبئ

أين أنا عالق ؟؟؟
حاولت العمل على jQuery اعتقدت أنه كان صحيحًا بشكل منطقي ، لكن النتيجة جعلتني أؤمن بخلاف ذلك :(

مشكلة في السؤال السابق
ساعد سؤالي السابق في التصفية ... لكن البيانات كانت hide() بشكل افتراضي ... كنت بحاجة إلى العكس ....

الجهد والكمان ؟؟
كمان : http://jsfiddle.net/logintomyk/r6g3k/1/

لغة البرمجة

<!-- 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>

بلدي noob 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();
}); 

Answer 1

قد يكون هذا أسهل

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 من مربع فحص. إنه يوضح فقط الأشياء المخفية ، لذلك ليس من الضروري تشغيل العرض عدة مرات على كتل المحتوى التي تنطبق على مربعات فحص متعددة.