javascript - 多项选择，其中问题被答案替换，并且能够嵌套在 javascript 或 jquery 中

Question

编辑:我对此处发布的代码进行了进一步改进，它允许您在特定分支中回答了所有问题后追加数据。看这个codepen举个例子。

好的，几天前我在这里创建了一个问题，即 here ，我得到了一些很大的帮助，并且能够调整我已经修改为这样的 JavaScript 代码:

    $('.inlinechoice').on('click','.question', function(e) {
      var $this = $(this),
          $id = $this.prop('id')

      $('.inlinechoice').hide();
      $('.answer-' + $id).show();
    });

基本上，它以许多问题/选项开始，当单击其中一个问题时，这些问题/选项会被替换为适当的答案。效果很好，做了我需要它做的事情...除了，我后来意识到我无法在 html 中嵌套更多问题，因为当单击选择/问题/选项时，javascript 隐藏了选择 block 文本。

所以，例如，如果我想这样做:

    <div class="inlinechoice">
      <a class="question" id="1">Choice 1</a>
      <a class="question" id="2">Choice 2</a> 
      <a class="question" id="3">Choice 3</a>
    </div>

    <div style ="display:none" class="answer-1">
    You picked 1

    <div class="inlinechoice">
      <a class="question" id="4">Choice 4</a>
      <a class="question" id="5">Choice 5</a> 
    </div>

    </div>
    <div style="display:none"class="answer-2">
     You picked 2
    </div>
    <div style="display:none" class="answer-3">
     You picked 3
    </div>

    <div style="display:none"class="answer-4">
     You picked 4
    </div>
    <div style="display:none" class="answer-5">
     You picked 5
    </div>

这行不通。如果可能的话我愿意这样做。

我认为我需要添加另一个变量来获取选择 block 的 id(类似于答案 id)，以便它可以显示和隐藏适当的选择 block ，但不可否认，我正在努力让我去做这件事眼下。另外，我想这更复杂，因为当您单击 ID 为“1”的“问题 1”时，它会显示答案“1”，这样我就可以看到代码是如何做到这一点的。

但是，当您单击 choiceblock-1 中包含的内容时，我需要告诉它隐藏 choiceblock-1 并可能(但并非总是)取消隐藏 choiceblock-2(如果单击了正确的问题)，我会这样做猜测可能会变得非常复杂，具体取决于我想要嵌套多少个问题(我认为最多 3 个，但可能更多？)？

无论如何，这显然是我需要思考和尝试的事情，但与此同时，如果有人有任何意见或建议，我们将非常欢迎!

编辑:清理了原始代码，因为其中有一些部分我认为不需要在那里。

编辑:我想我需要 2 个函数，一个用于设置 .inlinechoice ID，一个用于设置 .question id。

Codepen here .

Answer 1

好吧，我想我设法让一些东西发挥作用了。根据我之前对原始帖子的编辑，我意识到我需要有 2 个函数，一个用于显示答案，另一个用于根据 id 隐藏内联选择。现在，我很确定我这样做的方式不是最好的(甚至不是推荐的方式)，并且可能有一种方法可以简化和整理代码，所以我真的希望有人能给我一些关于这方面的提示。例如，这两个函数是通过单击 inlinechoice 来调用的，所以我不确定是否需要将其写出两次，但一个函数获取 .question 类 id，另一个函数获取 inlinechoice id。

        $('div[class*=inlinechoice').on('click','.question', function(e) {
          var $this = $(this),
              $id = $this.prop('id');

            $("#dialogue_container").append($('.answer-' + $id).contents());

        });

            $('div[class*=inlinechoice').on('click', function(a) {
              var $this = $(this),
              $cid = $this.prop('id');

              $('.inlinechoice-' + $cid).hide();


            });

如果您查看新的 codepen(下面链接)，然后单击选项 1，您会发现嵌套效果非常好。

无论如何，我会将其留在这里作为答案，但如果有人可以改进或提供更好的解决方案，那么我很乐意看看。

代码笔:here