如何在单击时更改元素的CSS类并删除所有其他类 [英] How to change an element’s CSS class and remove all other classes on click

问题描述

如何在AngularJS 2中处理一个案例，点击需要更改自己样式的元素，如果其他元素具有该样式，则需要将其移除 - 最好在一个函数中。 b
$ b

类似于 Angular.js如何在单击时更改元素css类并删除所有其他元素，仅在AngularJS 2中使用TypeScript。

组件

https://plnkr.co/edit/Q2BoU4sNnXdaJB5vrZ8h?p=preview

  //我们的根应用组件
从'@ angular / core'导入{NgModule} 
从'@ angular / platform-b​​rowser'导入{BrowserModule} 
从'@ angular / core'导入{Component}; 
 
 @Component（{
 selector：'my-app'，
 providers：[]，
 template：`
< div> 
< div（click）=isClassVisible =！isClassVisible;[ngClass] ={'my-class'：isClassVisible}> 
>我是一个div， b $ b< / div> 
< div（click）=isClassVisible =！isClassVisible;[ngClass] ={'my-class'：isClassVisible}> 
> I也希望被风格化，但只有当Im点击
< / div> 
< div（click）=isClassVisible =！isClassVisible;[ngClass] ={'my-class'：isClassVisible }> 
>当我们中的一个被点击时，我们想要成为唯一一个拥有所有其他风格的人回到正常
< / div> 
< div我只是在这里导致我的创作者喜欢偶数
< isClassVisible = / div> 
< / div&g t; 
`，
风格：[
`
 .my-class {
 background-color：yellow; 
} 
`
] 
}）
 class App {
 isClassVisible：false; 
 
构造函数（）{
} 
 
} 
 
 @NgModule（{
 imports：[BrowserModule]，
声明：[App]，
 bootstrap：[App] 
}）
导出类AppModule {} 
  

解决方案

解决问题的最简单方法是为每个包含的元素指定一个唯一的ID，并使用另一个变量来保存选定的ID。打开 my-class CSS类的逻辑现在将基于选定的ID。

您的新HTML模板：

 < div（点击） = toggleHighlight（1）; [ngClass] ={'my-class'：highlightedDiv === 1}> 
>我是单击
< / div>时获得样式的div 
  

您的 toggleHighlight 功能：

  highlightedDiv：number; 
 
 toggleHighlight（newValue：number）{
 if（this.highlightedDiv === newValue）{
 this.highlightedDiv = 0; 
} 
 else {
 this.highlightedDiv = newValue; 
 
 
  

工作Plnk： https://plnkr.co/edit/fNoXWhUhMaUoeMihbGYd?p=preview

How do I handle a case in AngularJS 2 where on click of an element it needs to change its own style, and if other elements have that style they need to have it removed — preferably in one function.

Similar to Angular.js How to change an elements css class on click and to remove all others, only in AngularJS 2, using TypeScript.

Component

https://plnkr.co/edit/Q2BoU4sNnXdaJB5vrZ8h?p=preview

//our root app component
import { NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {Component} from '@angular/core';

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <div (click)="isClassVisible = !isClassVisible;" [ngClass]="{'my-class': isClassVisible }">
        > I'm a div that gets styled on click
      </div>
      <div (click)="isClassVisible = !isClassVisible;" [ngClass]="{'my-class': isClassVisible }">
        > I also want to be styled but only when Im clicked
      </div>
      <div (click)="isClassVisible = !isClassVisible;" [ngClass]="{'my-class': isClassVisible }">
        > When one of us gets clicked the we want to be the only one with the style all others go back to normal
      </div>
       <div (click)="isClassVisible = !isClassVisible;" [ngClass]="{'my-class': isClassVisible }">
        > I'm just here cause my creator likes even numbers
      </div>
    </div>
  `,
  styles: [
  `
  .my-class {
    background-color: yellow;
  }
  `
  ]
})
class App {
  isClassVisible: false;

  constructor() {
  }

}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

解决方案

The easiest fix to your problem is to assign a unique ID to each included element together with employing another variable to hold selected ID. The logic to turn on my-class CSS class will now be based on the selected ID.

Your new HTML template:

<div (click)="toggleHighlight(1);" [ngClass]="{'my-class': highlightedDiv === 1}">
  > I'm a div that gets styled on click
</div>

Your toggleHighlight function:

highlightedDiv: number;

toggleHighlight(newValue: number) {
  if (this.highlightedDiv === newValue) {
    this.highlightedDiv = 0;
  }
  else {
    this.highlightedDiv = newValue;
  }
}

Working Plnk: https://plnkr.co/edit/fNoXWhUhMaUoeMihbGYd?p=preview

这篇关于如何在单击时更改元素的CSS类并删除所有其他类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！