Conditional choices should be either or

问题

This is an example how the code exist currently : http://jsfiddle.net/rym2g/

The only thing I need it to do now is based on the choice that was made make sure that it is the only choice available... for example:

who are you?

jim
kyle
becky

(you chose becky)

display becky's form

(you decided that you wanted to choose kyle instead of becky)

hide becky's form and display kyle's form only

Hope I've explained myself well enough.

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

And 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();
});

回答1:

There's several ways, but this is the simplest given what you are doing:

$(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();
});

View the Fiddle

回答2:

Okay,

I have arrived to this following code. All I need to do now is make sure that all of the questions stay visible given the path that the user is on. This way the user can go backward or forward if he/she chooses a different path.

I hope that I've made myself clear. Here is the fiddle 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>

来源：https://stackoverflow.com/questions/23897049/conditional-choices-should-be-either-or

标签

javascript

jquery

twitter-bootstrap

logic

conditional