Wie funktioniert der dynamische jQuery-Inhalt?

Question

Ich weiß nicht, ob es so heißt, aber ich versuche eine Art interaktive Seite zu erstellen, die den Inhalt aufgrund einer Reihe von Fragen ändert, die der Benutzer mit "Ja" oder "Nein" beantworten kann. Hier ist eine vereinfachte Version des Codes zum besseren Verständnis.

HTML:

<div class="container"> 
      <h1>Some question?</h1> 
      <h2 id="yes" role="button">Yes</h2> 
      <h2 id="no" role="button">No</h2> 
     </div> 

jQuery:

$(function() { 
    var question = $("h1"); 
    var yes = $("#yes"); 
    var no = $("#no"); 

    $(yes).click(function() { 
     question.text("Some text. Some other question?"); 
    }); 

    $(yes).click(function() { 
     question.text("Different text. Different question?") 
    }); 

}); 

Nun, was ich tun möchte, ist: Wenn die Antwort des Benutzers auf die erste Frage (die in der HTML) ist "ja", dann es würde die zweite Frage anzeigen (die erste in jQuery) und wenn seine Antwort darauf "ja" wäre, würde es die nächste Frage anzeigen und so weiter. Aber was es tut, ist, einfach zu der letzten in jQuery angegebenen Frage zu springen, wenn der Benutzer auf "Ja" klickt.

Wie kontrolliere ich das? Ist das der falsche Weg, um das zu erreichen, was ich erreichen möchte? Ich bin ein Noob, tut mir so leid, wenn es nicht viel Sinn macht.

Edit: Nun, wie schreibe ich eine if-Anweisung, die $("<img src="#">).appendTo(container); wird, wenn der Benutzer die dritte Frage erreicht?

Answer 1

$(function() { 
    var count = 0; 
    var question = $("h1"); 
    var yes = "#yes"; 
    var no = "#no"; 
    var questions = [ 
         "Some text. Some other question?", 
         "Different text. Different question?" 
        ]; 

    $(yes).click(function() { 
     if(count == 2){ 
      $("<img src='#'>").appendTo(container); 
     } 
     question.text(questions[count]); 
     count++; 
    }); 
}); 

Versuchen Sie diesen Code.

Wenn u

$(yes).click(function() { 
     question.text("Some text. Some other question?"); 
    }); 

$(yes).click(function() { 
     question.text("Different text. Different question?") 
    }); 

Anruf nach der ersten $(yes).click ausführt, ist es weiterhin den zweiten $(yes).click, daher die Frage, die Sie konfrontiert sind, auszuführen.

Mein vorgeschlagene Ansatz ist es, alle zu stellen füllen ur „Fragen“ in ein Feld und dann einen Index Zählung verwenden, um den <h1> Tag

Answer 2

Einen anderen Weg, dies zu tun zu füllen: Alle Fragen bereits sind auf die Seite, aber versteckt (außer der ersten). Das ist kein wirklicher dynamischer Inhalt, sondern erzielt das gleiche Ergebnis. Beachten Sie, wie Benutzerwerte gespeichert und dann gesendet werden können.

function storeResponse(id_question,value){ 
 
    $('#result'+id_question).val(value); 
 
    $('#container'+id_question).addClass("hidden"); 
 
    if (id_question<4){ 
 
     $('#container'+(id_question+1)).removeClass("hidden"); 
 
    } else { 
 
     $('#results').submit(); 
 
    } 
 
}

.hidden {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container1" class="container"> 
 
      <h1>1 Some question?</h1> 
 
      <h2 id="yes" onclick="storeResponse(1,1)" role="button">Yes</h2> 
 
      <h2 id="no" onclick="storeResponse(1,0)" role="button">No</h2> 
 
</div> 
 
<div id="container2" class="container hidden" > 
 
      <h1>2 Some question?</h1> 
 
      <h2 id="yes" onclick="storeResponse(2,1)" role="button">Yes</h2> 
 
      <h2 id="no" onclick="storeResponse(2,0)" role="button">No</h2> 
 
</div> 
 
<div id="container3" class="container hidden"> 
 
      <h1>3 Some question?</h1> 
 
      <h2 id="yes" onclick="storeResponse(3,1)"role="button">Yes</h2> 
 
      <h2 id="no" onclick="storeResponse(3,0)" role="button">No</h2> 
 
</div> 
 
<div id="container4" class="container hidden"> 
 
      <h1>4 Some question?</h1> 
 
      <h2 id="yes" onclick="storeResponse(4,0)" role="button">Yes</h2> 
 
      <h2 id="no" onclick="storeResponse(4,0)" role="button">No</h2> 
 
</div> 
 

 
<form id="results" action="..." method="..."> 
 
<input type="hidden" id="result1" name="result1" value=""> 
 
<input type="hidden" id="result2" name="result1" value=""> 
 
<input type="hidden" id="result3" name="result1" value=""> 
 
<input type="hidden" id="result4" name="result1" value=""> 
 
</form>