Pergunta

Onde tudo começou : Eu já fiz uma pergunta sobre filtros aqui: Resultado do filtro usando jQuery ou js de um conjunto de valores existente

Problema :
Como os dados vêm de outra página a um form post, todos os valores devem ser visíveis no início ...... para que o usuário possa passar por esses dados e, se necessário, ele tem o privilégio de usar filtros para resolver o requisito.

O que está me fazendo sentir como um trem de tremé que os valores (a serem filtrados) na página devem ser visíveis por padrão e depois quando o usuário clica em digamos class="tv", todos os outros div classes que não contêm tv deve se esconder

Onde estou preso ???
Tentei descobrir um jQuery que eu achei correto logicamente, mas o resultado me fez acreditar de outra forma :(

Problema com a pergunta anterior
Minha pergunta anterior ajudou na filtragem ... mas os dados eram hide() por padrão ... eu precisava de reverso ....

Esforço e violino ??
Violino : 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>

meu 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();
}); 
Foi útil?

Solução

isso pode ser mais 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
        });  
    }
});

fez um violino: http://jsfiddle.net/filever10/f8vk2/

demolir

puts são as caixas de seleção

cans são os blocos de conteúdo

Quando uma caixa de seleção muda, se nada estiver verificado atualmente, ele mostra tudo. Se algo for verificado, ele esconde todos os blocos de conteúdo e mostra qualquer um que tenha uma classe que corresponda ao id de uma caixa verificada. Ele mostra apenas coisas que estão ocultas, para que não seja necessário executar várias vezes em blocos de conteúdo que se aplicam a várias caixas verificadas.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top