Question

我想在bootstrap中选择单选按钮时隐藏并显示单个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');
});

有什么想法吗？

Answer 1

你正在复制id，你永远不应该这样做。不仅它使html无效，而且选择器最终将选择具有在DOM中首先出现的相同id的元素。单选按钮和目标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

Answer 2

您的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>

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

2 个答案:

标记

的js