Css 如何在Aurelia中添加单击事件类？

我是奥雷莉亚的新手。我正在寻找在单击事件中添加类的最佳方法

我只想单击“批准”或“请求信息”，然后在相应的“联系人卡”中添加一个类。此类将更改背景颜色

我知道这可能很简单，但我想我会在这里寻找最好的方法

以下是我得到的图像：

抱歉等了这么久，工作有点忙

这是我第一次在S.O.上发帖，所以对于我没有达到的期望，我深表歉意

  <div class="col-sm-4">
        <button class="btn btn-success col-sm-12" click.delegate="goodBoi()">
          approve contact
        </button>
          </div>

          <div class="col-sm-4">
              <button class="btn btn col-sm-12" click.delegate="requestContact()">
                request information
              </button>
          </div>
        </div>

---

有很多方法可以使用Aurelia设置CSS类。下面我准备了一个示例要点：

模板：

<template>
  <h1>${message}</h1>

  <div class="form-group ${clicked ? 'red' : 'blue'}" style="width: 100px; height: 100px;">

  </div>
  <div class="form-group">
    <button click.delegate="save()">
      Click me
    </button>
  </div>

</template>

但还有其他更干净的方法：

• 在一个地方使用
• 包括jQuery以便使用，例如

  $（“#myelement”）.addClass（）

---

请发布您的代码，以便我们查看您当前的代码。

goodBoi() {
    let result = confirm("Are you sure you want to confirm this contact?");
    if (result === true) {
      var standingShell = document.getElementsByClassName("list-group-item");
      //im hoping here I would add a class to the new variable//
      this.contact.approval = 'approved';
      this.save();

    }


  }
//confirms contact, changing color of approved contact//
//same thing here, just plan to give it a different color//
  requestContact() {
    let contactRequestText = "request sent to contact";
    this.routeConfig.navModel.setTitle(this.contact.approval = contactRequestText);
    this.ea.publish(new ContactUpdated(this.contact));
  }

<template>
  <h1>${message}</h1>

  <div class="form-group ${clicked ? 'red' : 'blue'}" style="width: 100px; height: 100px;">

  </div>
  <div class="form-group">
    <button click.delegate="save()">
      Click me
    </button>
  </div>

</template>

@autoinject
export class App { 
  @bindable clicked = false;

  save(){
   this.clicked = true; 
  }
}