Question

我正在使用Foundation 4自定义单选按钮。

我的单选按钮如下所示：

<label for="cat"><input name="cat" value="jersey" type="radio" id="jersey" style="display:none;"><span class="custom radio"></span></label>
<label for="cat"><input name="cat" value="shorts" type="radio" id="shorts" style="display:none;"><span class="custom radio"></span></label>
<label for="cat"><input name="cat" value="shirts" type="radio" id="shirts" style="display:none;"><span class="custom radio"></span></label>

我的jquery看起来像这样：

$('input[type=radio]').click(function(){
    $('.area').hide();
    $('#' + $(this).val()).show(); 
});

显示div的html如下所示：

<div class='area' id="jersey">jersey</div>
<div class='area' id="shorts">shorts</div>
<div class='area' id="shirts">shirts</div>
<div class='area' id="reversible">reversible</div>
<div class='area' id="outerwear">outerwear</div>
<div class='area' id="helmets">helmets</div>
<div class='area' id="other">other</div>

以前使用普通的单选按钮，但我没有运气使用这些自定义单选按钮。谁能帮我吗？谢谢！

Answer 1

ID必须是唯一的，jQuery只选择具有特定ID的第一个元素，因此您试图显示实际上隐藏且未触发更改/单击事件的单击输入元素。您应该收听由click元素触发的span事件。

$(function(){
    var $divs = $('.area');

    $('label').on('click', 'span.radio', function() {
        var val = $(this).prev('input').val();
        $divs.hide().filter('#' + val).show();  
    });
})

根据无线电值显示/隐藏div（自定义无线电，基础4）

1 个答案: