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

我附上了上面的代码链接，它似乎不适用于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());
});

如何显示所选类Jquery的内容

1 个答案: