JQuery переключение div с переключателями - PullRequest
Новая
       12

JQuery переключение div с переключателями

13 голосов
/ 13 января 2011

Простой HTML & JQuery 

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

Желаемый эффект переключения не работает. Если щелкнуть один блок радио, другой не удастся скрыть.

Есть идеи?

Ответы [ 3 ]

29 голосов
/ 13 января 2011 
<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://www.jsfiddle.net/eKFrW/

2 голосов
/ 13 января 2011 
$("input:radio").click(function(){
    $("div").hide();
    var div = "#blk-"+$(this).val();
    $(div).show();
});

Демо-версия здесь: http://jsfiddle.net/yLJPC/

1 голос
/ 13 января 2011

Вот, что вы хотите, я думаю. Для начала я бы выбрал первый переключатель и первый элемент div был виден. Тогда переключение кнопок поменяет местами div 

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