Nasıl radyo tipi seçimine dayalı bir div geçiş için?

3 Cevap php

Ben böyle bir şey kullanarak bir div geçiş -

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

Bu çalışıyor. Benim sorum ben bunu geliştirmek ve ben anahtarın tüm vakaları değiştirmek zorunda DAHA divlere var sanki daha esnek hale nasıl olduğunu.

Ayrıca bir işlevi anahtar işlevselliği içine ve bu tıklama ve değişim gibi olaylara bu fonksiyonu bağlamak gerekir (sadece sağlamak için bu çalışmaları geçiş)?

Yardımlarınız için teşekkürler.

3 Cevap

Bu sadece onu test çalışır.

<script type="text/javascript">
$(document).ready(function(){

    $('.MyDiv').hide();

    $('input[name="myRadio"]').change(function(){
    	var selected = $(this).val();
    	$('.MyDiv').slideUp();
    	$('#'+selected).slideDown();
    });

});
</script>

value id gösterilmesi gereken elemanın nerede radyo düğmeleri, bu gibi görünmelidir.

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

Ve son olarak, div s bu gibi görünmelidir, tüm sınıf olan MyDiv:

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

Aşağıdaki burada yapıştırılan kod dayanmaktadır - kullanmadan önce, aşağıda okuyabilirsiniz:

$("div").hide();
$("input[name='myRadio']").change(function(){
  $("div:not(#"+$(this).val()+")").slideUp();
  $("div#"+$(this).val()).slideDown();
});

Before Using...

Ben belki. Paneli, katlanabilir panellerin her bir sınıf eklemek öneririz. Ve sonra sadece div.panel yerine sayfadaki her div değiştirmek için seçiciler güncelleyin.

çözüm IE 8'de çalışmıyor - Aslında tam tersi davranış vardır. Yerine "değişim" "tıklayın" işlevini kullanın

  $('.myDiv').hide(); 
    $('input[name="myRadio"]').click(function(){
        var selected = $(this).val();
       $('.myDiv').slideUp();
        $('#'+selected).slideDown();
    });

etiketler