时间戳

首页 > 解决方案 > 如何在 Aurelia 的点击事件中添加类？

css - 如何在 Aurelia 的点击事件中添加类？

问题描述

我是奥里利亚的新手。我正在寻找在点击事件中添加类的最佳方法。

我只是想点击批准或请求信息，然后在相应的“联系人卡片”中添加一个类。这个类会改变背景颜色。

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

这是我所拥有的图像：

这是我所拥有的图像

抱歉久等了，工作有点忙。

这是我第一次在 SO 上发帖，所以对于我没有达到的任何期望，我深表歉意。

  <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>

要更改的元素名为“list-group-item”，包含联系人的详细信息（代码如上所示）。

<template>
<div class="contact-list">
   <ul class="list-group">
     <li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
       <a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
         <h4>${contact.firstName} ${contact.lastName}</h4>
         <p>${contact.company}</p>
         <p>${contact.email}</p>
         <h6>${contact.approval}</h6>
       </a>
       <a route-href="route: contacts; params.bind: {id:contact.id}">
          <p>${contact.phoneNumber}</p>
       </a>
     </li>
   </ul>
 </div>


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

标签： cssaurelia

解决方案

有很多方法可以使用 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>

和代码类：

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

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

https://gist.run/?id=425993b04a977466fa685758389aa2b4

但是还有其他更清洁的方法：

推荐阅读