Using a meteor template event to highlight selected list item

Question

I am creating a meteor app that has a list of answers within a list-group. The user is to select an answer. I would like the clicked answer to highlight in yellow (which works in the template event below) and the previously clicked answers to return to the default background i.e. un-highlight (not working). I have tried various solutions none of which seem to work. Here is the latest: template:

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

event helper:

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


},

Any help will be greatly appreciated.Please note, this is in a template "questItem" so the "this" in my events helpers refers to "this" question item which includes all of the answers. I am not iterating over the answers unfortunately.

score 0 · Answer 1 · edited May 23 '17 at 11:49

create a class 'list-group-clicked' with the yellow properties.

on click, loop through all elements and set class to list-group-item, except for the one just clicked (or set all to -item, then set one as -clicked)

Change an element's class with JavaScript

a deeper change would be to have the class come from your data or handlebar helper as well:

A. {{A}}

then have the event change your data. This used to be more necessary to avoid conflicts, but the rewrite of the template engine makes it a little less so.

Using a meteor template event to highlight selected list item

1 Answers1