1

当在引导程序中选择单选按钮时，我试图隐藏和显示单个 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');
});

有任何想法吗？

4

2 回答 2

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');
});

演示

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

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

小提琴

于 2013-07-09T02:11:35.133 回答
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>
于 2013-07-09T02:20:55.760 回答