javascript - 单击 meteor 更改 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

您可以通过 Hook 到 event.target 来访问被点击的元素。

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