Question

我在div中有三个按钮（每个按钮都有不同的颜色）opacity: 0.1。当我点击其中一个时，我会将它的不透明度改为1，这是我的问题。我如何检查元素是否具有特定的类？我当时想用ngClass。

Answer 1

更好的方法是创建一个非常简单的自定义指令：

@if(!empty($errors))
    @if($errors->any())
    <div class="alert alert-danger"> 
        <ul>
            @foreach($errors->all() as $error)
                <li>{!! $error !!}</li>
            @endforeach
        </ul>
    </div>
    @endif
@endif

在点击时切换opacity-1类。然后在您的元素上附加此指令：

import { Directive, HostBinding, HostListener } from '@angular/core';

@Directive({
  selector: '[appOpacity]'
})
export class OpacityDirective {
  @HostBinding('class.opacity-1') isClicked = false;

  @HostListener('click') toggleOpen() {
    this.isOpen = !this.isOpen;
  }
}

Answer 2

试试这个：

   <button (click)="opacityClass=true" [ngClass]="{'active':opacityClass}">
   </button>

.active{
   opacity:1;
  }

Answer 3

您可以使用ngClass。对于3个按钮：

<button [ngClass]="{'semi': active !== 1, 'opaque': active === 1}" (click)="active = 1">Button 1</button>
<button [ngClass]="{'semi': active !== 2, 'opaque': active === 2}"  (click)="active = 2">Button 2</button>
<button [ngClass]="{'semi': active !== 3, 'opaque': active === 3}" (click)="active = 3">Button 3</button>

或更一般的情况：

<ng-container *ngFor="let button of [1,2,3,4]; let i = index">
  <button [ngClass]="{'semi': active !== i + 1, 'opaque': active === i + 1}" (click)="active = i + 1">Button {{i + 1}}</button>

</ng-container>

DEMO

Angular2使用ngClass更改单个元素的css样式

3 个答案: