如何显示所选类Jquery的内容

Question

我有一些 html/jquery/css，我将它们结合起来创建了一个多选样式测验，效果很好。当用户单击一个选项时，选项列表将替换为适当的答案。我在问题的末尾添加了一个有效的 codepen 链接。

我希望识别最近选择的选项的 html 内容，以便我可以了解用户何时到达他们的问题的末尾，从而附加一个单独的文本块，但是，我正在努力做到这一点。

具体来说，我已经缩小了我想做的事情的范围，并精简了我的代码以使其更易于阅读。 javascript看起来像这样：

  $('div[class*=inlinechoice').on('click','.question', function(e) {
  var $this = $(this),
  $id = $this.prop('id');
  alert($('[class*="answer-"]').eq($id).text());
  });

html 看起来像这样：

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

    <div class="answer-1">
    You picked 1.  
    <div class="inlinechoice-1" id="1">
    <a class="question" id="4">Choice 4</a><br>
    <a class="question" id="5">Choice 5</a><br>
    </div>
    </div>
    <div class="answer-2">
    You picked 2. 
    </div>
    <div class="answer-3">
    You picked 3. 
    </div>
    <div class="answer-4">
    You picked 4. 
    <div class="inlinechoice-2" id="2">
    <a class="question" id="6">Choice 6</a><br>
    <a class="question" id="2">Choice 7 (2)</a><br>
    </div>
    </div>
    <div class="answer-5">
    You picked 5. 
    </div>
    <div class="answer-6">
    You picked 6. 
    </div>

最后的 css 看起来像这样：

    div[class*='inlinechoice-'] { cursor: pointer; }

    div[class*='answer-'] {display:none;}

我附上了上面的codepen链接，在chrome上好像不行，但是在IE上运行没问题。

此刻，这似乎是在选择下一个答案块的答案文本。因此，如果您单击选项 1，警报会返回您选择了答案 2。我知道这是因为 eq($id) 实际上是带回了索引，但我想我可以从 $id 中减去一个来获得正确的答案，但这似乎根本不起作用（警报只是返回为空）。我已经尝试在索引中进行硬编码，例如 .eq(0) 返回 answer-1 的内容，所以我知道它可以工作，但我不想硬编码，因为我希望它返回基于用户输入的信息。这可能甚至不是解决这个问题的最佳方法（取 id 号，减去 1 然后将其添加到 eq() 函数似乎很费力），但我整天都在做这个，这是最接近的我已经设法返回所需的东西。

完整项目的 Codepen 是 here（请注意，这几乎可以正常工作，它会将内容附加到选项 2 和 3，但不会附加到嵌套的选项 1。）

剥离代码的 Jsfiddle 是 here

Answer 1

您可以更改您的 javascript 来连接 id：

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