我如何使我的JavaScript查询递归

我想这样做，当我单击3个可能的答案中的答案时，将会有回答，然后再有3个新的可能的答案，以及不同的答案等待等等。这是我到目前为止的代码，但我不知道该如何使其递归

<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>

好，所以经过您的评论进行了一些返工之后，我想我将您需要的东西放在一起：小提琴

$（document）.on（...）行旨在处理动态添加的元素

$(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类，以便用户无法再次单击他们已经选择的元素。

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

接下来，我在" Newanswers"变量上进行了一些伪逻辑来创建您的下一组问题。无论您需要什么

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

除了交换选定的答案类并附加新答案外，递归是由于使用$（文档）.ON逻辑而起作用的。发生了什么：

页面显示初始问题集
文档正在收听.answer P Selector上的任何单击事件
用户选择一些答案
剩下的答案消失了，添加了新的问题和答案
进程重复步骤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>

相关内容

最新更新

热门标签：