基於無線電值顯示/隱藏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的第一個元素，因此您試圖顯示實際上隱藏的點擊輸入元素，並且不會觸發change/click事件。您應該聽取由span元素觸發的click事件。

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

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