条件选择应该是或者答案

【问题标题】：Conditional choices should be either or条件选择应该是或者
【发布时间】：2014-05-27 19:02:58
【问题描述】：

这是代码当前存在的示例：http://jsfiddle.net/rym2g/

我现在唯一需要它做的就是基于所做的选择，确保它是唯一可用的选择......例如：

你是谁？

吉姆
凯尔
贝基

（你选择了贝基）

显示贝基的表格

（你决定要选择 kyle 而不是 becky）

隐藏 becky 的表格，只显示 kyle 的表格

希望我已经对自己进行了充分的解释。

<form>
    <ul class="form-nav">
        <li><a href="#a-1">AAA</a></li>
        <li><a href="#a-2">BBB</a></li>
    </ul>
</form>

<form class="hidden" id="a-1">
    <ul class="form-nav">
        <li><a href="#a-1-1">aaa</a></li>
        <li><a href="#a-1-2">bbb</a></li>
    </ul>
</form>

<form class="hidden" id="a-1-1">
    <p>A-1-1</p>
</form>

<form class="hidden" id="a-1-2">
    <p>A-1-2</p>
</form>

<form class="hidden" id="a-2">
    <ul class="form-nav">
        <li><a href="#a-2-1">111</a></li>
        <li><a href="#a-2-2">222</a></li>
    </ul>
</form>

<form class="hidden" id="a-2-1">
    <p>A-2-1</p>
</form>

<form class="hidden" id="a-2-2">
    <p>A-2-2</p>
</form>

还有 JavaScript：

$(document).on("click", "ul.form-nav a", function(event) {
    event.preventDefault();
    var id = event.target.href.replace(/^[^#]+/, "");
    console.log("Going to: " + id);
    $(id).show().focus();
});

【问题讨论】：

我只想根据选择的选项隐藏未选择的选项。 jsfiddle.net/3qmeV 因此，这些问题可以很好地显示出来，因为它们将充当伪导航来在选项之间来回导航。我们应该不能同时看到两个不同的选项。
啊，没关系，我的评论是错误的，现在删除它。

标签： javascript jquery twitter-bootstrap logic conditional

【解决方案1】：

有几种方法，但考虑到你正在做的事情，这是最简单的：

$(document).on("click", "ul.form-nav a", function(event) {
    event.preventDefault();
    var id = event.target.href.replace(/^[^#]+/, "");
    console.log("Going to: " + id);
    // Hide forms that do not have the selected id
    $('form.hidden').not(id).hide();
    // Show the appropriate form
    $(id).show().focus();
});

查看Fiddle

【讨论】：

嗨 Cale_b，感谢您的回复...您的代码运行良好，但我正在寻找不同的效果。也许这会让你更好地理解我想要完成的事情。因此，这些问题可以很好地显示，因为它们将充当伪导航，在选项之间来回导航。我们不应该同时看到两个不同的选项。 jsfiddle.net/3qmeV
然后将$('form.hidden') 更改为简单的$('form')，它会隐藏所有其他组问题。
也许我需要把整个事情写得更好，当我只是将 $('form') 应用到它隐藏所有问题的代码时。我需要在同一页面上隐藏/显示答案或问题，具体取决于上述问题的答案jsfiddle.net/3qmeV
仍在寻找解决方案。
@KylePoyser - 请编辑您的问题。我不明白您在寻找什么，或者它与我提供的答案有何不同。

【解决方案2】：

好的，

我已经到了以下代码。我现在需要做的就是确保在用户所在路径下所有问题都保持可见。这样，如果用户选择不同的路径，他/她可以后退或前进。

我希望我已经说清楚了。这是小提琴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>

【讨论】：