Como alternar a div com base na seleção do tipo de rádio?
-
21-08-2019 - |
Pergunta
I alternar uma div usando algo parecido com isso -
<input type="radio" name="myRadio" value="myDiv_1" />MyDiv
<input type="radio" name="myRadio" value="myDiv_2" />MyDiv2
<input type="radio" name="myRadio" value="myDiv_3" />MyDiv3
<div id="myDiv_1"> 1 Some input fields, text </div>
<div id="myDiv_2"> 2 More input fields, text </div>
<div id="myDiv_3"> 3 More input fields, text </div>
JAVASCRIPT
$('#myDiv_1').hide();
$('#myDiv_2').hide();
$('#myDiv_3').hide();
$('input[name="myRadio"]').change(function() {
var selected_type = $(this).val();
switch(selected_type) {
case "myDiv_1":
$('#myDiv_1').slideDown();
//if others are visible just slideup
$('#myDiv_2').slideUp();
$('#myDiv_3').slideUp();
break;
case "myDiv_2":
$('#myDiv_2').slideDown();
//if others are visible just slideup
$('#myDiv_1').slideUp();
$('#myDiv_3').slideUp();
break;
case "myDiv_3":
$('#myDiv_3').slideDown();
//if others are visible just slideup
$('#myDiv_2').slideUp();
$('#myDiv_1').slideUp();
break;
}
}
);
Isso funciona bem. A minha pergunta é como posso melhorá-lo e torná-lo mais flexível como se eu tiver a mais divs eu tenho que modificar todos os casos de switch.
Também deve incluir a funcionalidade do interruptor em uma função e se ligam esta função para eventos como clique e mudança (só para garantir que as obras Alternando) ??
Obrigado por sua ajuda.
Solução
Isso funciona, eu só testei.
<script type="text/javascript">
$(document).ready(function(){
$('.MyDiv').hide();
$('input[name="myRadio"]').change(function(){
var selected = $(this).val();
$('.MyDiv').slideUp();
$('#'+selected).slideDown();
});
});
</script>
Os botões de rádio deve olhar como este, onde a value
é o id
do elemento que deve ser mostrado.
<form action="example.com" method="post">
<input type="radio" name="myRadio" value="myDiv_1" />MyDiv<br />
<input type="radio" name="myRadio" value="myDiv_2" />MyDiv2<br />
<input type="radio" name="myRadio" value="myDiv_3" />MyDiv3<br />
<input type="radio" name="myRadio" value="myDiv_4" />MyDiv4
</form>
E, finalmente, os div
s deve olhar como este, todos com o MyDiv
classe:
<div id="myDiv_1" class="MyDiv">Div number 1!</div>
<div id="myDiv_2" class="MyDiv">Div number 2!</div>
<div id="myDiv_3" class="MyDiv">Div number 3!</div>
<div id="myDiv_4" class="myDiv">Div number 4!</div>
Outras dicas
O seguinte é baseado no código colado aqui - antes de usar, leia abaixo:
$("div").hide();
$("input[name='myRadio']").change(function(){
$("div:not(#"+$(this).val()+")").slideUp();
$("div#"+$(this).val()).slideDown();
});
Antes de usar ...
Eu sugiro que você adicionar uma classe para cada um dos painéis dobráveis, talvez .panel. E depois atualizar os seletores para modificar apenas div.panel em vez de cada div na página.
sua solução não funciona no IE 8-- realmente tem o comportamento oposto. Use a função "clique" em vez de "mudança"
$('.myDiv').hide();
$('input[name="myRadio"]').click(function(){
var selected = $(this).val();
$('.myDiv').slideUp();
$('#'+selected).slideDown();
});