2

Por mais trivial que pareça estou tendo dificuldades para executar esse script, o problema que tenho é o seguinte, ao entrar em uma página mostro uma div com um conteúdo selecionado de meu banco e isso está sendo feito corretamente, a partir de então o usuário tem a opção de mostrar essas informações em um Grid ou em uma Lista, criei um radio com duas opções, Grid e Lista e estou tentando esconder a primeira div que é mostrada ao entrar na página quando uma dessas opções forem selecionadas. O que fiz até o momento é isso:

    $(window).load(function(){  
        $(':radio').change(function (event) {       
            var id = $(this).data('id');
            $('#' + id).addClass('none').siblings().removeClass('none');

            if ((id == "lista") || (id == "grid")) {
                document.getElementById('geral').style.display="none";                          
            }

        }); 
    });

As div´s estão assim:

<div id="geral">
  Geral Mostra ao entrar na página
</div>

<div id="lista" class="none">
  Lista, mostra ao selecionar Lista no radio
</div>

<div id="grid" class="none">
  Grid, mostra ao selecionar Lista no radio
</div>

0

1 Resposta 1

3

Você simplesmente pode verificar o evento .change() e alterar o display.

$(document).ready(function() {
    $('input[type=radio]').change(function() {
        if (this.value == 'geral') {
            $("#geral").css("display","block");
            $("#lista").css("display","none");
            $("#grid").css("display","none");
        }
        else if (this.value == 'lista') {
            $("#lista").css("display","block");
            $("#geral").css("display","none");
            $("#grid").css("display","none");
        }
         else if (this.value == 'grid') {
            $("#grid").css("display","block");
            $("#lista").css("display","none");
            $("#geral").css("display","none");
        }
    });
});
.none{
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="group" value="geral">Geral<br>
<input type="radio" name="group" value="lista">Lista<br>
<input type="radio" name="group" value="grid">Grid<br/>

<div id="geral">
  Geral Mostra ao entrar na página
</div>

<div id="lista" class="none">
  Lista, mostra ao selecionar Lista no radio
</div>

<div id="grid" class="none">
  Grid, mostra ao selecionar Lista no radio
</div>

Você pode adicionar ou remover a classe igual o seu exemplo, mas fica a seu critério.

Exemplo no JSFiddle.

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .