Question

您好

如果我点击一个按钮，所有按钮都会出现勾号。

我希望按钮可用作单选按钮

上次我在java脚本中not working button in javaScript

请帮助我，因为我是角色的新手，我无法访问dom元素我试图使用HTMLELEMENT但它也没有用

提前致谢

import {
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  showTick = false;
  Message = '';
  maxlength = 100;
  name = 0;
  ngOnInit(): void {}

  findAncestor(el, cls) {
    while ((el = el.parentElement) && !el.classList.contains(cls)) {
      return el;
    }
  }
  onClick(target) {
    (this.showTick === true) ? this.showTick = false: this.showTick = true;
    const row = this.findAncestor(target, 'test');
    const tick = document.getElementsByClassName('fa-lg');
    Array.prototype.forEach.call(tick, function(el) {
      el.style.visibility = 'hidden';
    });
    target.nextElementSibling.style.visibility = 'visible';
  }
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <!--font awesome-->
  <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
  <!--google glyphicons-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <div>
    <button type="button" class="btn btn-md" (click)="onClick(this)">Just an Idea</button>
    <span class="fa-stack fa-lg" id="loadingImage" [hidden]="showTick">
      <i class="fas fa-check-circle"></i>
    </span>
    <button type="button" class="btn btn-md" (click)="onClick(this)">Just an Idea</button>
    <span class="fa-stack fa-lg" id="loadingImage" [hidden]="showTick">
      <i class="fas fa-check-circle"></i>
    </span>
    <button type="button" class="btn btn-md" (click)="onClick(this)">In Development</button>
    <span class="fa-stack fa-lg" id="loadingImage" [hidden]="showTick">
      <i class="fas fa-check-circle"></i>
    </span>
    <button type="button" class="btn btn-md" (click)="onClick(this)">Being Polited</button>
    <span class="fa-stack fa-lg" id="loadingImage" [hidden]="showTick">
      <i class="fas fa-check-circle"></i>
    </span>
    <button type="button" class="btn btn-md" (click)="onClick(this)">Proof Tested</button>
    <span class="fa-stack fa-lg" id="loadingImage" [hidden]="showTick">
      <i class="fas fa-check-circle"></i>
    </span>
    <button type="button" class="btn btn-md" (click)="onClick(this)">Operationals</button>
    <span class="fa-stack fa-lg" id="loadingImage" [hidden]="showTick">
      <i class="fas fa-check-circle"></i>
    </span>
  </div>
  <button class="btn btn-md" (click)="onClick(this)">Just</button>
  <span class="fa-stack fa-lg" id="loadingImage" [hidden]="showTick">
    <i class="fas fa-check-circle"></i>
  </span>

</body>

</html>

Answer 1

在你的html中，你需要传递$event点击事件（目前你正在传递this）。我还删除了隐藏属性（[hidden]="showTick"），因为我们已经在onClick方法中更改了可见性。

<div>
  <button type="button" class="btn btn-md" (click)="onClick($event)">Just an Idea</button>
  <span class="fa-stack fa-lg" id="loadingImage">
    <i class="fas fa-check-circle"></i>
  </span>
  <button type="button" class="btn btn-md" (click)="onClick($event)">Just an Idea</button>
  <span class="fa-stack fa-lg" id="loadingImage">
    <i class="fas fa-check-circle"></i>
  </span>
  <button type="button" class="btn btn-md" (click)="onClick($event)">In Development</button>
  <span class="fa-stack fa-lg" id="loadingImage">
    <i class="fas fa-check-circle"></i>
  </span>
  <button type="button" class="btn btn-md" (click)="onClick($event)">Being Polited</button>
  <span class="fa-stack fa-lg" id="loadingImage">
    <i class="fas fa-check-circle"></i>
  </span>
  <button type="button" class="btn btn-md" (click)="onClick($event)">Proof Tested</button>
  <span class="fa-stack fa-lg" id="loadingImage">
    <i class="fas fa-check-circle"></i>
  </span>
  <button type="button" class="btn btn-md" (click)="onClick($event)">Operationals</button>
  <span class="fa-stack fa-lg" id="loadingImage">
    <i class="fas fa-check-circle"></i>
  </span>
</div>
<button class="btn btn-md" (click)="onClick($event)">Just</button>
<span class="fa-stack fa-lg" id="loadingImage">
  <i class="fas fa-check-circle"></i>
</span>

在你的打字稿文件中，event.target将为你提供目标元素。注意：在您的打字稿文件中，this将引用component。

的实例

onClick(event) {
    const tick = document.getElementsByClassName('fa-lg');
    Array.prototype.forEach.call(tick, function (el) {
      el.style.visibility = 'hidden';
    });
    if (event.target.nextElementSibling)
      event.target.nextElementSibling.style.visibility = 'visible';
}

Answer 2

我注意到你的app.component.ts上的模板有app-root选择器，而index.html上不存在标记<app-root></app-root>。尝试重构它。我给你一些参考如下：

的index.html

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <!--font awesome-->
  <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
  <!--google glyphicons-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.component.html

<div>
  <button type="button" class="btn btn-md" (click)="onClick($event)">Just an Idea</button>
  <span class="fa-stack fa-lg" id="loadingImage" [hidden]="showTick">
    <i class="fas fa-check-circle"></i>
  </span>
  <button type="button" class="btn btn-md" (click)="onClick($event)">Just an Idea</button>
  <span class="fa-stack fa-lg" id="loadingImage" [hidden]="showTick">
    <i class="fas fa-check-circle"></i>
  </span>
  <button type="button" class="btn btn-md" (click)="onClick($event)">In Development</button>
  <span class="fa-stack fa-lg" id="loadingImage" [hidden]="showTick">
    <i class="fas fa-check-circle"></i>
  </span>
  <button type="button" class="btn btn-md" (click)="onClick($event)">Being Polited</button>
  <span class="fa-stack fa-lg" id="loadingImage" [hidden]="showTick">
    <i class="fas fa-check-circle"></i>
  </span>
  <button type="button" class="btn btn-md" (click)="onClick($event)">Proof Tested</button>
  <span class="fa-stack fa-lg" id="loadingImage" [hidden]="showTick">
    <i class="fas fa-check-circle"></i>
  </span>
  <button type="button" class="btn btn-md" (click)="onClick($event)">Operationals</button>
  <span class="fa-stack fa-lg" id="loadingImage" [hidden]="showTick">
    <i class="fas fa-check-circle"></i>
  </span>
  <button class="btn btn-md" (click)="onClick($event)">Just</button>
  <span class="fa-stack fa-lg" id="loadingImage" [hidden]="showTick">
    <i class="fas fa-check-circle"></i>
  </span>
</div>

在我看来，你应该更改你的代码，并确保安装了font-awesome 5并正确设置。

不要忘记将(click)="onClick(this)"更改为(click)="onClick($event)"，如Anand所说，因为html文件中的this参数指的是组件本身。

无法选择一个按钮无法使用打字稿访问角度4中的DOM

2 个答案: