如何查找 css class 并将其添加到 div 的 children 之一？

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>

我想在点击按钮后添加一个 class 到 post-content。嗯，首先我需要找到一个parent，对吧？然后，我想找到其中一个 children 并向其添加自定义 css class.

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" 值来添加 class "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 {}

如何查找 css class 并将其添加到 div 的 children 之一？

How to find and add css class to one of div's children?

events

parent

target

angular