我有以下meteor.js模板:
<template name="users">
<div class="container-fluid">
<div class="row-fluid">
<div class="page-header">
<h1><small>Users List</small></h1>
</div>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
{{#each userList}}
{{>userRow}}
{{/each}}
</tbody>
</table>
</div>
</div>
</template>
<template name="userRow">
<tr class="userRow">
<td>{{name}}</td>
</tr>
</template>
这是相应的事件处理程序:
Template.userRow.events({
'click .userRow':function(evt,tmpl){
console.log(tmpl.data.name);
}
});
这是css:
.table-striped tbody tr.highlight td {
background-color: red;
}
.table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th {
background-color: #550055;
color:#eeeeee;
}
悬停时突出显示效果很好,但是,当点击特定行时,鼠标悬停时它不会保留突出显示的颜色。
我该怎么做才能解决这个问题?
答案 0 :(得分:3)
假设您要将highlight
类添加到userRow
,您可以尝试这样的事情:
Template.userRow.events({
'click .userRow': function(e) {
console.log(this.name);
$('.userRow').removeClass('highlight');
$(e.currentTarget).addClass('highlight');
}
});