流星-如何使单击的表格行保持突出显示的颜色

Question

我有以下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;
}

悬停时突出显示效果很好，但是，当单击特定行时，鼠标悬停时它不会保留突出显示的颜色。

我该怎么做才能解决此问题？

Answer 1

假设你想将增加highlight类的userRow ，你可以尝试这样的事：

Template.userRow.events({
  'click .userRow': function(e) {
    console.log(this.name);
    $('.userRow').removeClass('highlight');
    $(e.currentTarget).addClass('highlight');
  }
});