Question

我已在脚本中添加jQuery并使用

 import * as $ from 'jquery';

也是。我还在HTML文件中添加了jQuery。

但是我的toggleClass()函数无法正常工作。当我检查控制台时，它没有显示任何错误。它只是空的。

下面是我的HTML和ts代码：

HTML代码：

 <div class="web" (click) = "myFunc()">
    <p>
        Web Development&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       $300
    </p>
 </div>
 <div class="design" (click) = "myFunc()">
    <p>
      Design &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      $400
    </p>
  </div>
  <div class="integration" (click) = "myFunc()">
     <p>
        Integration &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      $20
    </p>
  </div>
  <div class="training" (click) = "myFunc()">
    <p> 
     Training &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      $500
    </p>
  </div>
</div>
<div class="total">
   Total &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   $0
</div>

ts代码：

import { Component } from '@angular/core';
import * as $ from 'jquery';
//declare var jquery:any;
//declare var $ :any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myFunc() {
    $(this).toggleClass("active");
  }
}

Answer 1

您无需使用jquery，只需将视图上的单击绑定更改为(click)="myFunc($event)"，并将myFunc上的单击绑定更改为：

myFunc(e) {
    const target: HTMLElement = e.target;
    target.classList.toggle('active');
}

Answer 2

它可能无法正常工作，因为$(this)指向当前的类实例。

您需要引用jquery中的source元素才能正常工作。从模板将'$event'对象传递给您的函数，并在函数内部获取目标对象：

<div class="web" (click) = "myFunc($event)">

myFunc(event: any) {
  $(event.target).toggleClass("active");
}

请参阅此堆叠闪电战：https://stackblitz.com/edit/angular-dsely1

toggleClass（）在Angular 4中不起作用

2 个答案: