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>

我想：如果我点击广播水，属性测试=＆＃34;一个＆＃34;那么应该告诉我所有div的属性test =＆＃34; one＆＃34;。如何使用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();
});

显示具有属性的元素

6 个答案: