如果有多个条件,如何显示隐藏的div?

时间:2013-07-11 20:54:32

标签: javascript jquery multiple-conditions

我在目前正在制作的计划中遇到了一些障碍。在询问了我的最后一个问题后,我几乎可以完成整个过程,直到这一点。我试图做的是不是必须创建多个div来让我的代码工作(它会以这种方式工作,但我宁愿减少代码量)只是使用一个div来显示我想要的它显示。例如,这里是jfiddle的一个例子,我正在尝试做什么。

http://jsfiddle.net/vcq9L/

这是我正在使用的HTML的一个例子

<input name="search_fields" type="radio" onclick="showtest(0)" /> Test

<div id="test0">
Test 0<p></p>
<input name="search_fields" type="radio" onclick="showtest(1)" />Test 1
<input name="search_fields" type="radio" onclick="showtest(2)" />Test 2
<input name="search_fields" type="radio" onclick="showtest(3)" />Test 3
<p></p>
</div>

<div id="test1">
Test 1<p></p>
<input name="search_fields" type="radio" onclick="showtest(4)" />One
<input name="search_fields" type="radio" onclick="showtest(4)" />Two
<p></p>
</div>

<div id="test2">
Test 2<p></p>
<input name="search_fields" type="radio" onclick="showtest(4)" />One
<input name="search_fields" type="radio" onclick="showtest(4)" />Two
<p></p>
</div>

<div id="test3">
Test 3<p></p>
<input name="search_fields" type="radio" onclick="showtest(4)" />One
<input name="search_fields" type="radio" onclick="showtest(4)" />Two
<p></p>
</div>

<div id="test4">
    Test
</div>

这是js

function showtest(test){
    $('[id^="test"]').hide();
    if(test >= 0){
        $('#test0').show();     
    }
    if(test === 4){
        $('#test1').show();
        $('#test2').hide();
        $('#test3').hide();
    }
    $('#test' + test).show('slow');
}

当你运行jfiddle时,第一个单选按钮如何在线上运行并显示最终的测试div是我希望它对所有人来说如果有意义的话。最好是将数据放入一个数组然后调用js中的数组,以便它显示我想要的方式还是比它简单得多?

0 个答案:

没有答案