jquery - 根据无线电值显示/隐藏 div（自定义无线电，Foundation 4）

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