How do I make my javascript query recursive?

Question

I want to make so, that when i click an answer from the 3 possible answers, there will be the response and again another 3 new possible answers with different responses waiting and so on. Here is my code so far, but i don't know how to make it recursive

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
    $('.answers p').click(function()
    {
        var $parent = $(this).parent(); 
        var response = $parent.data("specific");
        $(this).append(response);
        $parent.siblings('.answers').remove();
    });
    });
</script>
</head>

<div class="question">
<div class="question-text">
    <p>First question?</p>
    </div>
    <div class="answers" data-specific=" First Response">
    <p>First answer</p> 
    </div>
    <div class="answers" data-specific=" Second Response">
    <p>Second answer</p>
    </div>
    <div class="answers" data-specific=" Third Response">
    <p>Third answer</p>
    </div>
</div>

The response must have the same format as the question before, therefore recalling the expression that was used for the initial question. — Georgescu Razvan, May 06 '15 at 13:13
http://jsbin.com/focovefisa/1/edit?html,output See how when I click the "First answer" there appears the "first response?" well, i want to make it so when i click the "first answer" there appears another question, with 3 more possible answers and so on — Georgescu Razvan, May 06 '15 at 13:19
That has nothing to do with recursion.. There are a few questions you need to clarify. Where do you get the data for the answers, questions? All client-side? Server-side? — greenhoorn, May 06 '15 at 13:22
Ok sorry then, i must have misunderstood recursion, all the data comes server-side, the user just has to click everytime one of the 3 possible answers — Georgescu Razvan, May 06 '15 at 13:32

score 0 · Answer 1 · edited May 23 '17 at 12:14

Ok, so after some rework based on your comments, I think I put together what you need: Fiddle

The $(document).on(...) line is meant to handle dynamically added elements

$(document).ready(function(){
$(document).on('click','.answers p',function()
{
    var $parent = $(this).parent(); 
    var response = $parent.data("specific");
    $(this).append(response);
    $parent.siblings('.answers').remove();

I've kept your code the same up to this point. I first replace the .answers class with a different class so that the user cannot click on the elements again that they have already made a selection for.

    $('.answers').addClass('selectedAnswer').removeClass('answers');

Next, I put in some pseudo-logic to create your next set of questions, at the 'newAnswers' variable. You can replace this with a function, or some ajax call, whatever you need.

    //do work to get next questions
    var newAnswers = '<div class="question-text">    <p>Next question?</p>    </div><div class="answers" data-specific="Next First Response">    <p>Next First answer</p>     </div>';

I then append the new set of questions to the question class element

    $('.question').append(newAnswers);
});
});

The recursion works due to using the $(document).on logic, in addition to swapping out the selected answer class and append the new answers. What happens is this:

Page displays initial question set
Document is listening for any click events on an .answer p selector
User selects some answer
Remaining answers disappear, new question and answers are added
Process repeats to step 3

    $(document).ready(function(){
    $(document).on('click','.answers p',function()
    {
        var $parent = $(this).parent(); 
        var response = $parent.data("specific");
        $(this).append(response);
        $parent.siblings('.answers').remove();
        $('.answers').addClass('selectedAnswer').removeClass('answers');
        //do work to get next questions
        var newAnswers = '<div class="question-text">    <p>Next question?</p>    </div><div class="answers" data-specific="Next First Response">    <p>Next First answer</p>     </div>';
        $('.question').append(newAnswers);
    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
<div class="question-text">
    <p>First question?</p>
    </div>
    <div class="answers" data-specific=" First Response">
    <p>First answer</p> 
    </div>
    <div class="answers" data-specific=" Second Response">
    <p>Second answer</p>
    </div>
    <div class="answers" data-specific=" Third Response">
    <p>Third answer</p>
    </div>
</div>

How do I make my javascript query recursive?

1 Answers1