使用流星模板事件突出显示所选列表项

Question

我正在创建一个流星应用程序，该应用程序在一个列表组中具有一个答案列表。 用户将选择一个答案。 我希望单击的答案以黄色突出显示（在下面的模板事件中有效），而先前单击的答案则返回默认背景，即不突出显示（不起作用）。 我尝试了各种解决方案，但似乎都没有用。 这是最新的：模板：

<template name="questItem">
  <div class="quest">
    <!--<div class="quest-content">-->
    <div class="panel panel-default">
        <div class="panel-heading">
        <h3 class="panel-title">{{Question}}</h3>
      </div>
    <div class="panel-body">
    <ul class="list-group" id="answer">
        <li class="list-group-item" name="answer" id="A">A.     {{A}}</li>
        <li class="list-group-item" name="answer" id="B">B.    {{B}}</li>
        <li class="list-group-item" name="answer" id="C">C.    {{C}}</li>
        <li class="list-group-item" name="answer" id="D">D.    {{D}}</li>
        <li class="list-group-item" name="answer" id="E">E.    {{E}}</li>
        </ul>
        <button type="button" name="submitAnswer" class="btn btn-default">Answer</button>
        {{#if imagePresent}}
          <p>There are images</p>
          {{/if}}
        {{> responseToAnswer}}
    </div>
    </div>
  </div>
</template>

事件助手：

Template.questItem.events({
'click #answer': function (e, tmpl){
    var ans = e.target.id;
    e.currentTarget.style.backgroundColor = " ";
    e.target.style.backgroundColor = "yellow";
    Session.set("selectedAnswer", ans);
    Session.set("isSelected", !Session.get("isSelected"));


},

任何帮助将不胜感激。请注意，这在模板“ questItem”中，因此事件助手中的“ this”是指“ this”问题项，其中包括所有答案。 不幸的是，我没有反复回答这些问题。

Answer 1

创建带有黄色属性的类“列表组单击”。

单击时，遍历所有元素，并将类设置为list-group-item，除了刚刚单击的元素外（或将全部设置为-item，然后将一个设置为-clicked）

使用JavaScript更改元素的类

更深层次的变化是让该类也来自您的数据或车把帮手：

答：{{A}}

然后让事件更改您的数据。 过去，避免冲突很有必要，但是重写模板引擎使其变得更少了。