Question

我想这样做，当我点击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>

Answer 1

好的，所以在根据你的评论进行一些修改之后，我想我把你需要的东西放在一起：Fiddle

$（document）.on（...）行用于处理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();

到目前为止，我的代码保持不变。我首先用不同的类替换.answers类，以便用户不能再次点击他们已经选择的元素。

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

接下来，我在“新的答案”中添加了一些伪逻辑来创建下一组问题。变量。你可以用一个函数或一些ajax调用替换它，无论你需要什么。

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

由于使用$（document）.on逻辑，除了交换选定的答案类并附加新答案之外，递归也起作用。会发生什么：

页面显示初始问题集
文档正在侦听.answer p选择器上的任何点击事件
用户选择一些答案
剩下的答案消失，添加了新的问题和答案
流程重复步骤3

＆＃13;

    $(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);
    });
    });

＆＃13;

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

＆＃13;

如何使我的javascript查询递归？

1 个答案: