Comment fonctionne le contenu dynamique jQuery?

Question

Je ne sais pas si c'est comme ça que ça s'appelle mais j'essaye de créer une sorte de page interactive qui change de contenu en fonction d'une série de questions auxquelles l'utilisateur peut répondre «Oui» ou «Non». Voici une version simplifiée du code pour une meilleure compréhension.

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?") 
    }); 

}); 

Maintenant ce que je veux faire est: Si la réponse à la première question de l'utilisateur (l'un dans le HTML) était "oui", il afficherait la deuxième question (la première dans jQuery) et si sa réponse était "oui", elle afficherait la question suivante et ainsi de suite. Mais ce qu'il fait est juste de sauter à la dernière question spécifiée dans jQuery lorsque l'utilisateur clique sur "oui".

Comment contrôler cela? Est-ce la mauvaise façon de faire ce que j'essaie d'accomplir? Je suis un noob désolé si je n'ai pas beaucoup de sens.

Modifier: Maintenant, comment écrire une instruction if qui va $("<img src="#">).appendTo(container); lorsque l'utilisateur atteint la troisième question?

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++; 
    }); 
}); 

Essayez ce code.

Lorsque u appelez

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

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

Après l'exécution de la première $(yes).click, il continue d'exécuter le 2ème $(yes).click, d'où le problème que vous rencontrez.

Mon approche proposée est de mettre remplir toutes ur « questions » dans un tableau, puis utiliser un index nombre pour remplir la balise <h1>

Answer 2

Une autre façon de le faire: Toutes les questions sont déjà la page, mais cachée (sauf la première). Ce n'est pas du vrai contenu dynamique, mais obtenez le même résultat. Notez comment les valeurs utilisateur peuvent être stockées puis envoyées.

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>