流星-如何使單擊的表格行保持突出顯示的顏色

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');
  }
});