帶屬性的顯示元素

Question

<input type="radio" name="group2" test="one" value="Water"> Water 
<input type="radio" name="group2" test="two" value="Beer"> Beer<br> 

<div style="display: none" test="one">aaaaaaa</div> 
<div style="display: none" test="two">bbbbbbb</div> 
<div style="display: none" test="one">ccccccc</div> 

我想：如果我點擊無線電水屬性測試=「一」然後應該顯示我所有的屬性測試=「一」的股利。我怎樣才能使它與jQuery？

LIVE：http://jsfiddle.net/hRCXV/

Answer 1

試試這個：

$("input[type='radio']").click(function() { 
    var test = $(this).attr("test"); 
    $("div[test]").hide(); 
    $("div[test='" + test + "']").show(); 
}); 

Updated fiddle

請注意，您在此處創建屬於您自己的屬性無效。如果您使用的是HTML5，則應考慮使用data屬性來存儲與每個元素相關的所需信息。

Answer 2

附上標籤貼到Water文本，並使用屬性選擇一個單擊處理程序：

<label for="option1"> 
    <input type="radio" name="group2" id="option1" test="one" value="Water"> Water 
</label> 

<script> 
$('label').click(function() { 
    // Logic tells me that you want to only show the test elements whose 
    // attribute matches the selected radio element; Hide the previous ones: 
    $('div[test]').hide(); 

    // Get test value: 
    var test = $('#' + $(this).attr('for')).attr('test'); 

    $('div[test="' + test + '"]').show(); 
}); 
</script> 

Answer 3

$('input [value="Water"]').click(function() { 
    $('[test="one"]').show();   
}); 

Answer 4

的jsfiddle：http://jsfiddle.net/hRCXV/1/

$("input[type=radio][value=Water]").click(function() 
              { 
               $("[test=one]").show(); 
              });​ 

Answer 5

我相信這是你正在尋找的東西？

​$(':radio[name="group2"]')​.click(function(e){  
    var test = $(this).attr('test'); 
$('div[test]').hide(); 
$('div[test='+test+']').show(); 
    });​ 

Answer 6

試試這個

jQuery(document).ready(function(){ 
    var yourAttributeName = 'test'; 
    var allDivs = jQuery('div['+yourAttributeName+']'); 

    jQuery('input['+yourAttributeName+']').click(function(){ 
     allDivs.hide().filter('[' + yourAttributeName + '=' +  jQuery(this).attr(yourAttributeName) + ']').show();  
    }) 
    //check the init checked 
    .filter(':checked') 
    //and fire click event to filter 
    .click(); 
});