Pregunta

Donde todo comenzo : Ya he hecho una pregunta en los filtros aquí: Resultado del filtro usando jQuery o JS desde un conjunto de valor existente

Problema :
Dado que los datos provienen de otra página a través de un form post, se supone que todos los valores son visibles al principio ... por lo que el usuario puede pasar por esos datos y, si es necesario, tiene el privilegio de usar filtros para resolver el requisito.

¿Qué me hace sentir como un trenes?es que los valores (para filtrar) en la página se supone que son visibles de forma predeterminada y luego cuando el usuario hace clic en decir class="tv", todos los demás div classes que no contienen tv debería esconderse

¿Dónde estoy atrapado ???
Traté de resolver un jQuery que pensé que era correcto lógicamente, pero el resultado me hizo creer lo contrario :(

Problema con la pregunta anterior
Mi pregunta anterior ayudó a filtrar ... pero los datos fueron hide() Por defecto ... necesitaba reverso ...

Esfuerzo y violín ??
Violín : 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>

mi novato 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();
}); 
¿Fue útil?

Solución

Esto podría ser más fácil

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
        });  
    }
});

hizo un violín: http://jsfiddle.net/filever10/f8vk2/

desglose

puts son las casillas de verificación

cans son los bloques de contenido

Cuando cambia un estado de casilla de verificación, si no se verifica actualmente nada, lo muestra todo. Si se revisa algo, oculta todos los bloques de contenido y muestra cualquiera que tenga una clase que coincida con el id de una casilla marcada. Solo muestra cosas que están ocultas, por lo que no tiene que ejecutar el programa varias veces en bloques de contenido que se aplican a múltiples casillas marcadas.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top