toggleClass()在Angular 4中不起作用 [英] toggleClass() not working in Angular 4

问题描述

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

I've added jQuery in script and used

 import * as $ from 'jquery';   

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

as well. I've also added jQuery in the HTML file.

但是我的toggleClass()函数不起作用.当我检查控制台时，它没有显示任何错误.它只是空的.

But my toggleClass() function is not working. When I checked the console, it didn't show any error. It was just empty.

下面是我的HTML和ts代码:

Below is my HTML and ts code:

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");
  }
}

推荐答案

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

You don't need to use jquery, just change your click binding on view to (click)="myFunc($event)", and on myFunc change to:

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

这篇关于toggleClass()在Angular 4中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！