使用单选按钮隐藏/显示 div答案

【问题标题】：Hiding/showing div using radio buttons使用单选按钮隐藏/显示 div
【发布时间】：2013-07-06 12:07:16
【问题描述】：

当在引导程序中选择单选按钮时，我试图隐藏和显示单个 div。我无法让它工作。这是我当前的代码：http://jsfiddle.net/pLqmS/9/

    <div class="row demo-row">
        <div class="span7">
            <div id="opt1" class="option">
            <h5>Generation</h5>  
        </div>
        <div id="opt2" class="option" style="display: none;">
            <h5>Test</h5>
        </div>
        <div id="opt3" class="option" style="display: none;">
            <h5>Test</h5>
        </div>
        <div id="opt4" class="option" style="display: none;">
            <h5>Test</h5>
        </div>
    </div>

这是我的脚本：

$('.phone-choice').click(function () {
$('.option').each(function () {
    if ($(this).is(':visible')) {
        $(this).stop().slideUp('slow');
    }
});
var id = $(this).val();
$('#opt' + id).stop().slideDown('slow');
});

有什么想法吗？

【问题讨论】：

标签： javascript twitter-bootstrap radio-button

【解决方案1】：

您的 HTML 元素有重复的 id。请注意，输入元素共享某些 div 元素的 id

 <div id="opt1" class="option" style="display: none;">
 <input type="radio" class="phone-choice" name="optionsRadios" id="opt1" value="opt1" data-toggle="radio" checked></label>

你还有一个未闭合的 div 标签

        <div class="span7">
            <div id="opt1" class="option">
            <h5>Generation</h5>  
        </div>

【讨论】：

【解决方案2】：

您正在复制 ID，您永远不应该这样做。不仅它使 html 无效，而且选择器最终将选择具有相同 id 的元素，该元素首先出现在 DOM 中。您的单选按钮和目标 div 的 ID 相同。您可以改为将它们设为类名。

使用简化版您可以这样做：

标记

  <div  class="option opt1">
                <h5>Generation</h5> 
        </div>
        <div  class="option opt2" style="display: none;">
                <h5>Test</h5>

        </div>
        <div class="option opt3" style="display: none;">
                <h5>Test</h5>

        </div>
        <div  class="option opt4" style="display: none;">
                <h5>Test</h5>

        </div>

Js

$('.phone-choice').change(function () {
    $('.option:visible').stop().slideUp('slow');
    var id = this.value;
    $('.' + id).stop().slideDown('slow');
});

Demo

如果你想根据元素的位置（索引）来定位，你可以试试这个：

$('.phone-choice').change(function () {
    var $this = this
    $('.option:visible').stop().slideUp('slow', function () {
       $('.option').eq($('phone-choice').index($this)).slideDown('slow');
    });
});

FIddle

【讨论】：