Verschachtelte IFs mit Hilfe von jQuery

Question

Ich bin neu bei JQuery - dachte, es könnte gut sein, es für ein Projekt, an dem ich teilnehme, zu übernehmen. Grundsätzlich möchte ich eine Form von Arten erstellen, und jedes Mal, wenn eine Frage auf dem Formular beantwortet wird, erscheint eine neue Frage in Abhängigkeit von der Antwort. Ich habe ein bisschen Pseudo-Code dafür geschrieben und könnte es wahrscheinlich in PHP schreiben. Das Problem ist, die aktuelle Version hat mehrere Seiten mit jeder einzelnen Möglichkeit.

Ich brauche eine effiziente und leicht zu wartende und modifizierbare Möglichkeit, dies zu schaffen.

Um ein bisschen mehr Hintergrund zu geben, ist hier, wie es funktioniert ..

Jede Frage hat eine Ja/Nein-Antwort. Abhängig von der Antwort wird eine andere Frage gestellt, und so weiter, bevor eine bestimmte Schlussfolgerung erreicht wird. Es gibt ungefähr 25 verschiedene mögliche Ergebnisse.

Kennt jemand irgendwelche Referenzen, die ich verwenden könnte, um so etwas zu tun, oder wenn es derzeit etwas ähnliches gibt?

Danke, Sean

Answer 1

Wenn Sie nicht über viele andere Fragen haben, man konnte sie nur in einem JS-Array laden und von dort nehmen; keine Notwendigkeit, AJAX zu verwenden.

Wenn Sie auf der anderen Seite viele Fragen haben und Hunderte von KB in den Browser laden, sollten Sie eine AJAX-Version entwickeln.

Aber ich glaube, ich verstehe immer noch nicht die Frage ... was genau hast du Probleme mit? jQuery? Ein Algorithmus? AJAX? Wie erstelle ich Markup um dies zu erreichen?

Vielleicht könnte die Veröffentlichung Ihres aktuellen Codes dazu führen, dass wir Ihnen besser helfen.

Answer 2

jquery forms plugin ist wahrscheinlich ein guter Weg, um darüber nachzudenken, wie man das angehen kann. Ich denke, Sie werden feststellen, dass es fast trivial ist, sie zu implementieren.

Answer 3

eine Möglichkeit, die Formatierung Ihrer Daten zu prüfen, ist eine XML-Struktur, mit jeder möglichen Antwort aufgeführt als Kind der „Eltern“ Frage:

<question text="Is blue your favorite color" > 
    <question answered="yes" text="Is 98.6 degrees your normal internal temperature"/> 
    <question answered="no" text="Is green your favorite color"> 
    <question answered="yes" text="Do you have green eyes" /> 
    <question answered="no" text="Is your favorite color white"/> 
    </question> 
<question> 

Answer 4

dies versucht .. nicht

getestet

<form> 
<label id="id1">Do you like turkey?</label> 
<input type="radio" name="group1" value="Y" onclick="ShowYes(1);">Yes 
<input type="radio" name="group1" value="N" onclick="ShowNo(1);" >No 
</ br> 
<div id="Set2"> 
    <label id="id2">Do you like mirrors?</label> 
    <input type="radio" name="group2" value="Y" onclick="ShowYes(2);">Yes 
    <input type="radio" name="group2" value="N" onclick="ShowNo(2);" >No 
</div> 
<div id="Set3"> 
    <label id="id3">Do you like winter?</label> 
    <input type="radio" name="group3" value="Y" onclick="ShowYes(3);">Yes 
    <input type="radio" name="group3" value="N" onclick="ShowNo(3);" >No 
</div> 
<div id="Set4"> 
    <label id="id4">Do you like dogs?</label> 
    <input type="radio" name="group4" value="Y" onclick="ShowYes(4);">Yes 
    <input type="radio" name="group4" value="N" onclick="ShowNo(4);" >No 
</div> 
<div id="Set5"> 
    <label id="id4">Do you like winter?</label> 
    <input type="radio" name="group5" value="Y" onclick="ShowYes(5);">Yes 
    <input type="radio" name="group5" value="N" onclick="ShowNo(5);" >No 
</div> 

function ShowYes(questionSet){ 
switch(questionSet) 
{ 
    case 1: 
     $(Set2).show(); 
     break; 
    case 2: 
     $(Set3).show(); 
     break; 
    default: 
     alert(); 
}} 

function ShowNo(questionSet){ 
switch(questionSet) 
{ 
    case 1: 
     $(Set4).show(); 
     break; 
    case 2: 
     $(Set5).show(); 
     break; 
    default: 
     alert(); 
}} 

dann an die Spitze Ihrer html hinzufügen document.ready ... ich bin sicher, dass alle divs ca versteckt n in einem .each() auch getan werden.

$(document).ready(function(){ 
$('#Set2').hide(); 
$('#Set3').hide(); 
$('#Set4').hide(); 
$('#Set5').hide();}