Question

我试图学习如何使用jquery来显示/隐藏依赖于值的元素。我不确定.show / .hide是否是正确的选择，所以任何帮助都将不胜感激...

以下是jsfiddle上的示例，其中有2个单选按钮和2个div。

我希望Jquery通过checked单选按钮的依赖关系显示单个div，因此它将显示仅被检查的那个。

HTML ：

 <input type="radio" name="one" value="01" checked> Male<br>
 <input type="radio" name="two" value="02"> Female<br>

<div class="showhide">
show me when 01 is checked.
</div>

<div class="showhide">
show me when 02 is checked.
</div>

JQuery （试图了解这里要做什么）：

$("div.showhide").hide();
$("div.showhide").show();

// or maybe with:

$("div.showthis").toggle(this.checked);

Answer 1

使用data-*属性在这种做法中派上用场。请记住，无线电name属性必须相同，以便在任何给定时间都可以检查一个且仅一个复选框。并且，代码中没有p标记，至少在提供的示例中，为什么还要为选择器添加前缀呢？

以下示例使用data-section属性，该属性具有选中复选框时必须显示的元素的选择器。值得一提的是，这是代码是动态的，并且在使用div添加更多输入时不需要更改代码。

＆＃13;

$(function() {
    
    // listen for changes
    $('input[type="radio"]').on('change', function(){
        
        // get checked one            
        var $target = $('input[type="radio"]:checked');
        // hide all divs with .showhide class
        $(".showhide").hide();
        // show div that corresponds to selected radio.
        $( $target.attr('data-section') ).show();

    // trigger the change on page load
    }).trigger('change');

});

＆＃13;

.showhide {  
   display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="radio" name="one" data-section="#div-1" value="01" checked>Male<br>
<input type="radio" name="one" data-section="#div-2" value="02">Female<br>

<div id="div-1" class="showhide">
show me when 01 is checked.
</div>
<div id="div-2" class="showhide">
show me when 02 is checked.
</div>

＆＃13;

显示一个div并通过选中的单选按钮

1 个答案: