点击流星改变css背景颜色

Question

我试图在单击按钮时更改表格中行的背景。目前我的代码只会更改表格中第一行的背景颜色，而只会更改第一行的背景颜色。即使我单击另一行的按钮，它仍然使第一行背景为绿色。

如何使用相应的按钮更改每个行的背景？ （即按钮位于行中，单击该按钮时，特定行的背景颜色会发生变化）

这是我桌子的html代码：

<template name="adminPage">
 ...
  <tbody>
    {{#each student}}
      <tr  class="accordion-toggle mainRow">
         <td>{{> expandButton}}</td>
         <td>{{Name}}</td>
         <td>{{PhoneNumber}}</td>
         <td>{{VipID}}</td>
         <td>{{> buttonSelections}}</td>
       </tr>
       <tr>
         <td colspan="12" class="hiddenRow">
 ...
</template>

<template name="buttonSelections">
 ...
  <button class="btn btn-success btn-sm">
    <span class="glyphicon glyphicon-log-in"> Check-In</span>
  </button>
 ...
</template>

这是我的js代码：

Template.buttonSelections.events({
  'click .btn-success, click .glyphicon-log-in'() {
   $(this).closest('.mainRow').css({"background-color":"#13D620","color":"white"});
   }
  }
})

因此，问题在于选择特定行。我试过的时候：

Template.buttonSelections.events({
   'click .btn-success, click .glyphicon-log-in'() {
     $('.mainRow').css({"background-color":"#13D620","color":"white"});
    }
  }
})

点击任何一个签到按钮

后，我得到以下内容

Answer 1

您可以通过挂钩event.target。

来访问点击的元素

Template.buttonSelections.events({
  'click .btn-success, click .glyphicon-log-in': function(e) {
   $(e.target).closest('.mainRow').css({"background-color":"#13D620","color":"white"});
   }
  }
});