Comment trouver et ajouter une classe css à l'un des enfants de 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> 

Je voudrais ajouter une classe à post-content après avoir cliqué sur le bouton. Eh bien, premièrement, je dois trouver un parent, non? Ensuite, j'aimerais trouver un de ses enfants et y ajouter une classe css personnalisée.

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

Vous utilisez Angular2 à droite? Il n'est pas nécessaire de faire du JavaScript personnalisé comme vous le feriez dans jQuery. Voici comment ajouter la classe "myClass" en basculant la valeur "showMyClass" dans votre composant, où la propriété "showMyClass" est un booléen. Ou faites "showMyClass" un tableau de booléens. Voici un exemple complet de travail:

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