根据用户的路径,所有问题都必须保持可见

时间:2014-06-19 18:59:08

标签: javascript forms conditional

我有这个相当广泛的引用形式......现在我需要做的就是添加一些代码,让问题保持可见,而不是在做出选择后隐藏它。

即 用户将处于业务路径(所有表1,11,12,13,14,15,16),驻地路径(所有表2,21,22,23,24,25,26或a我有一个列表路径(所有table3)。

这是我的小提琴 http://jsfiddle.net/XuVUb/

代码片段:

<script type="text/javascript">
function show_table(id){
  document.getElementById('table1').style.display='none';
  document.getElementById('table11').style.display='none';
  document.getElementById('table12').style.display='none';
  document.getElementById('table13').style.display='none';
  document.getElementById('table14').style.display='none';
  document.getElementById('table15').style.display='none';
  document.getElementById('table16').style.display='none';
  document.getElementById('table2').style.display='none';
  document.getElementById('table21').style.display='none';
  document.getElementById('table22').style.display='none';
  document.getElementById('table23').style.display='none';
  document.getElementById('table24').style.display='none';
  document.getElementById('table25').style.display='none';
  document.getElementById('table26').style.display='none';
  document.getElementById('table3').style.display='none';
  document.getElementById('table'+id).style.display='block';
}
</script>

1 个答案:

答案 0 :(得分:0)

我想你想要这样的东西:http://jsfiddle.net/S9bSe/

HTML:

<div class="level-1">
    <p>Are you dead or alive?</p>
    <ul>
        <li><a href="#dead" data-level="2">Dead</a></li>
        <li><a href="#alive" data-level="2">Alive</a></li>
        <li><a href="#schrodingers_cat" data-level="2">Both</a></li>
    </ul>
    <div id="dead" class="hidden level-2">
        <p>Do you have physical form?</p>
        <ul>
            <li><a href="#corpse" data-level="3">Yes</a></li>
            <li><a href="#ghost" data-level="3">No</a></li>
        </ul>
        <div id="corpse" class="hidden level-3">
            <p>You are a corpse</p>
        </div>
        <div id="ghost" class="hidden level-3">
            <p>You are a ghost</p>
        </div>
    </div>
    <div id="alive" class="hidden level-2">
        <p>Do you have 9 lives?</p>
        <ul>
            <li><a href="#regular_cat" data-level="3">Yes</a></li>
            <li><a href="#maybe_human" data-level="3">No</a></li>
        </ul>
        <div id="regular_cat" class="hidden level-3">
            <p>You are a cat</p>
        </div>
        <div id="maybe_human" class="hidden level-3">
            <p>You might be human</p>
        </div>
    </div>
    <div id="schrodingers_cat" class="hidden level-2">
        <p>You are a cat and you belong to Schrödinger</p>
    </div>
</div>

CSS

.hidden {
    display: none;
}

JavaScript(使用jQuery)

$("a").on("click", function () {
    var id = $(this).attr("href");
    var level = $(this).data("level");
    $(".level-" + level).addClass("hidden");
    $(id).removeClass("hidden");
});

请原谅我介绍jQuery,但它至少应该说清楚如何解决问题。