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"));


},

任何帮助将不胜感激。请注意，这是一个模板＆＃34; questItem＆＃34;所以＆＃34;这个＆＃34;在我的活动中，帮助者指的是＆＃34;这个＆＃34;问题项目，包括所有答案。不幸的是，我没有迭代答案。

Answer 1

创建一个类＆＃39; list-group-clicked＆＃39;具有黄色属性。

单击，循环遍历所有元素并将类设置为list-group-item，只需单击一个（或将所有设置为-item，然后将其设置为-clicked）

Change an element's class with JavaScript

更深层次的改变是让课程来自您的数据或车把助手：

一个。 {{A}}

然后让事件更改您的数据。这曾经是避免冲突的必要条件，但是模板引擎的重写使得它更少一些。

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

1 个答案: