如何查找和添加css类到一个div的孩子？

Question

<div class="post-content-container"> 
    <div class="post-content"> 
    Some very long text 
    </div> 
    <button (click)="showMore($event)">Show more</button> 
</div> 

<div class="post-content-container"> 
    <div class="post-content"> 
    Some very long text 
    </div> 
    <button (click)="showMore($event)">Show more</button> 
</div> 

<div class="post-content-container"> 
    <div class="post-content"> 
    Some very long text 
    </div> 
    <button (click)="showMore($event)">Show more</button> 
</div> 

我想在点击按钮后给post-content添加一个类。那么，首先我需要找一位家长，对吧？然后，我想找到它的一个孩子，并添加到它的自定义CSS类。

showMore(event: any) { 
    let parent = event.target.parentNode; <-- post-content-container 
    //now, how to get into parent's child (I mean post-content) and add to it some custom css class? 
} 

Answer 1

您正在使用Angular2吗？不需要像在jQuery中那样执行任何自定义JavaScript。以下是如何通过切换组件中的“showMyClass”值来添加类“myClass”，其中“showMyClass”属性是布尔值。或者让“showMyClass”一组布尔值。这里是一个完整的工作示例：

import { Component, NgModule } from '@angular/core' 
import { BrowserModule } from '@angular/platform-browser' 
import { FormsModule } from '@angular/forms'; 

@Component({ 
    selector: 'my-app', 
    template:` 
    <div class="post-content-container"> 
     <div class="post-content" [ngClass]="{myClass: showMyClass[0]}"> 
     Some very long text 1 
     {{showMyClass[0]}} 
     </div> 
     <button (click)="showMore(0, $event)">Show more</button> 
    </div> 

    <div class="post-content-container"> 
     <div class="post-content" [ngClass]="{myClass: showMyClass[1]}"> 
     Some very long text 2 
     {{showMyClass[1]}} 
     </div> 
     <button (click)="showMore(1, $event)">Show more</button> 
    </div> 
    ` 
}) 
export class App { 
    public showMyClass: Array<boolean>; 

    constructor(){ 
     this.showMyClass = []; 
    } 

    showMore(index, event: any) { 
     this.showMyClass[index] = !this.showMyClass[index]; 
    } 
} 


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