[英]Using a meteor template event to highlight selected list item
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 ie 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. 任何帮助将不胜感激。请注意,这在模板“ questItem”中,因此事件助手中的“ this”是指“ this”问题项,其中包括所有答案。 I am not iterating over the answers unfortunately. 不幸的是,我没有反复回答这些问题。
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) 单击时,遍历所有元素,并将类设置为list-group-item,除了刚刚单击的元素外(或将全部设置为-item,然后将一个设置为-clicked)
Change an element's class with JavaScript 使用JavaScript更改元素的类
a deeper change would be to have the class come from your data or handlebar helper as well: 更深层次的变化是让该类也来自您的数据或车把帮手:
A. {{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. 过去,避免冲突很有必要,但是重写模板引擎使其变得更少了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.