多选,其中问题被替换为具有嵌套在javascript或jquery中的能力的答案



Edit:我对这里发布的代码做了进一步的改进,它允许您在特定分支中回答完所有问题后附加数据。有关示例,请参见此代码笔。

好吧,所以我几天前在这里创建了一个问题,就在这里,我得到了一些很好的帮助,并能够调整我已经修改为以下的javascript代码:

$('.inlinechoice').on('click','.question', function(e) {
var $this = $(this),
$id = $this.prop('id')
$('.inlinechoice').hide();
$('.answer-' + $id).show();
});

基本上,它从许多问题/选项开始,当点击其中一个问题时,这些问题/选项会被替换为适当的答案。效果很好,可以完成我需要它做的事情……不过,我后来意识到,我将无法在html中嵌套更多的问题,因为当单击选项/问题/选项时,javascript会隐藏choiceblock文本。

例如,如果我想这样做:

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

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

我想我需要添加另一个变量,它可以获取选择锁的id(类似于答案id),这样它就可以显示和隐藏适当的选择锁,但无可否认,我目前很难做到这一点。此外,我想这更复杂,因为当你点击ID为"1"的"问题1"时,它会显示答案"1",所以我可以看到代码是如何做到这一点的。

然而,当你点击choiceblock-1中包含的内容时,我需要告诉它隐藏choiceblock-1,如果点击了正确的问题,可能(但不总是)取消隐藏choiceblock-2,我想这可能会变得非常复杂,这取决于我想嵌套的问题数量(我想最多3个,但可能更多?)?

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

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

编辑:我想我需要两个函数,一个用来设置.inlinecoice ID,另一个用来设定.tquestion ID。

代码笔在这里。

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

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

});

如果您查看新的代码笔(链接如下),并单击选项1,您会发现嵌套效果非常好。

无论如何,我会把这个作为一个答案留在这里,但如果有人能改进或提供更好的解决方案,我会很乐意考虑的。

Codepen:此处

最新更新