2011-01-12 33 views
13

Basit html & jQueryjQuery geçiş div

<label><input id="rdb1" type="radio" name="toggler" value="1" />Money</label> 
<label><input id="rdb2" type="radio" name="toggler" value="2" />Interest</label> 

<div id="blk-1" style="display:none"> 
    ... 
</div> 
<div id="blk-2" style="display:none"> 
    ... 
</div> 

$(function() { 
    $("[name=toggler]").each(function(i) { 
     $(this).change(function(){ 
      $('#blk-1, #blk-2').hide(); 
      divId = 'blk-' + $(this).val(); 
      $("#"+divId).show('slow'); 
     }); 
    }); 
}); 

istenen geçiş efekti olsa çalışmaz. Bir radyo kutusunu tıklamak diğerini gizleyemez.

Herhangi bir Fikir? Burada

+0

'u değiştirecek, ancak kodunuzdaki diğer radyo düğmesini gizlemeyecekseniz, yalnızca bir tanesini göstereceksiniz? –

+0

Her bir –

+1

koduna ihtiyacınız yoktur. Kodunuz benim için çalışıyor: http://jsfiddle.net/Reqyx/ (Diğerlerinin de belirttiği gibi. .each() 'e ihtiyacınız yok. Buna ek olarak, bildirmeniz gerekir. 'var' ile değişken.) – user113716

cevap

27
<label><input id="rdb1" type="radio" name="toggler" value="1" />Money</label> 
<label><input id="rdb2" type="radio" name="toggler" value="2" />Interest</label> 

<div id="blk-1" class="toHide" style="display:none"> 
    money 
</div> 
<div id="blk-2" class="toHide" style="display:none"> 
    interest 
</div> 

$(function() { 
    $("[name=toggler]").click(function(){ 
      $('.toHide').hide(); 
      $("#blk-"+$(this).val()).show('slow'); 
    }); 
}); 

http://jsfiddle.net/yLJPC/

+0

Harika çözüm. –

+1

üzerinde yüklendiğini gösteren bir div gösterdiyse bu daha da büyük olur. Bu @MrRebel: '$ (" # blk - "+ $ (" [name = toggler]: checked ") kullanabilirsiniz. Val()) .show(); ' – Thony

+1

.click işlevi neden kullanılıyor? Seçilen öğeye tekrar tıkladığınızda, bir efekt var. [.change] 'i (https://api.jquery.com/change/) kullanarak, bu fonksiyon sadece seçimde bir değişiklik olduğunda uygulanır. Bayan bir şey mi var? – sschoof

2
$("input:radio").click(function(){ 
    $("div").hide(); 
    var div = "#blk-"+$(this).val(); 
    $(div).show(); 
}); 

Çevrimiçi demo:

1

http://www.jsfiddle.net/eKFrW/ gibi İşte istediğini düşünüyorum. Başlamak için ilk radyo düğmesini seçtim ve ilk div görünürdü. Ardından, düğmelerin değiştirilmesi,

$("input:radio").click(function(){   
    $('#blk-1').toggle(); 
    $('#blk-2').toggle(); 
});