Javascript 显示/隐藏多层次深度

Question

I need help understanding how to write show/hide javascript where there are multiple levels of elements to show/hide.

I hope this isn't too difficult to explain.

How our currents system works, is that a CSS class is added to an input such as a radio button option or checkbox. The CSS class would be "show-question2"

The element that needs to be toggled for "show/hide" is given the class "showable-question2"

The Javascript function listens for the click event, matches the css class "show-{0} with the element that has the corresponding "showable-{0}" and toggles its visibility.

MY ISSUE:

For example, if you have a question, that depending on how you answer it, will show/hide a new question.

But if how you answer that second question means that a third question is "shown", i run into a problem.

If i am to go back to answer the original question differently, as expected the second question will be hidden, as its visibility has been toggled OFF, but the third dependent question, is still visible.

In order to achieve my goal, do these elements need to nest in the Html?

EDIT

The problem is that questions have dependancies on other questions.

So If Question 1, is answered with an answer from a list, that then triggers a second question, the second question in this instance is shown to the end user.

So your toggling Question 2's visibility on how Question 1 is answered.

Question 2 may have dependants also, so if the user answers question 2 with a specific option, a third question will become visible.

Question 3, is a dependant of Question 2.

Now, If the user decides that they have changed their mind, and pick a different answer to Question 1, there will be no requirement now for Question 2, and it will be hidden.

The problem being, that Question 1, does not toggle the visiblity of Question 3, which will remain visible, and is only relevant to Question 2, which has been hidden and when no longer required.

Answer 1

Why don't you change your javascript to implement the behaviour you are seeking? Basically, you want to implement a sequence of states, with some specific rules about state transition, which you need to put into a function. Your model is an array [{question_number, answer, answer_eval}] . answer_eval can be for example good , bad . Your state is an array [{question number, show}] . show can be for instance display or hide .

When you click on a question, you get the number of that question, you have the current state and model in your arrays, and you want to decide your next state. Write the function that does just that.

so it a function f :: (event, state, model) -> (state, model) which could be specified around those lines :

• event : click

  1. get the number of the question
  2. show that question
  3. hide all other questions with answer_eval NOT good (that should cover hiding your third question)
  4. hide all other dependent questions (that should cover hiding your second question)
  5. update model and state arrays

• event : evaluate answer

  1. get the number of the question
  2. compute answer_eval
  3. good => show dependent question(s)
  4. bad => your behaviour here
  5. update model and state arrays

I did not understand exactly what was the behaviour you want after a click, but the principle will always be the same. If you are able to specify it, you are able to write it.

Hope that helps