0

カスタム ラジオ ボタンに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>

以前は通常のラジオ ボタンで動作していましたが、これらのカスタム ラジオ ボタンで動作させることができませんでした。誰でも私を助けることができますか？ありがとう！

4

1 に答える 1

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();  
    });
})
于 2013-03-14T21:15:23.433 に答える