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

Using a meteor template event to highlight selected list item

本文关键字：显示 列表 流星 事件      更新时间：2023-09-26

我正在创建一个流星应用程序，该应用程序在列表组中有一个答案列表。用户需要选择一个答案。我想点击的答案突出显示黄色(在下面的模板事件中工作)和以前点击的答案返回到默认背景，即不突出显示(不工作)。我尝试了各种解决方案，但似乎都不起作用。以下是最新消息:模板:

<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="answerswer">
        <li class="list-group-item" name="answerswer" id="A">A.     {{A}}</li>
        <li class="list-group-item" name="answerswer" id="B">B.    {{B}}</li>
        <li class="list-group-item" name="answerswer" id="C">C.    {{C}}</li>
        <li class="list-group-item" name="answerswer" id="D">D.    {{D}}</li>
        <li class="list-group-item" name="answerswer" 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"));

},

任何帮助都将非常感激。请注意，这是在模板"questiontem"中，所以我的事件帮助器中的"this"指的是包含所有答案的"this"问题项。遗憾的是，我没有重复回答

创建一个带有黄色属性的类list-group-clicked

单击时，遍历所有元素并将class设置为list-group-item，除了刚刚单击的元素(或将所有元素设置为-item，然后将其中一个设置为-clicked)

用JavaScript修改元素's类

更深层的改变是让类也来自数据或handlebar帮助器:

。{{一}}

然后让事件更改您的数据。在过去，这对于避免冲突是非常必要的，但是模板引擎的重写使它变得不那么必要了。

相关文章：