在 JavaScript 中单击后更改类名称答案

【问题标题】：Changing classes names after clicking on it in JavaScript在 JavaScript 中单击后更改类名称
【发布时间】：2018-11-17 11:28:15
【问题描述】：

我正在使用 Angular 6 和 Bootstrap。我正在尝试使用document.getElementsByClassName 在单击后更改类名称（以更改其大小）。我使用*ngFor 创建了我的元素。点击它们后coinDetails(coin,i) 功能开始工作。

现在，单击元素后它会增加大小（类更改为：col-lg-2 col-md-2 col-sm-12 col-xs-12 resize），然后在第二次单击同一元素后，它会减小大小（类更改为：col-lg-3 col-md-3 col-sm-12 col-xs-12 resize），正如我想要的.

但是当我单击一个元素然后单击另一个元素（index 更改）时，第一个元素保持增加。

我不知道，如何检测变量index是否改变了。

也许屏幕截图会更好地解释它。在这种情况下，我在开始时单击了“LTC”框，然后单击了“STRAT”框。 'STRAT' 增大了尺寸，但 'LTC' 仍然放大了，尽管它不再是活跃的。我希望这个“LTC”框在它停止活动后与“ZEC”或“BTE”大小相同。

    coinDetails(coin, index) {
    if (this.detailToggle[index]) {
      this.detailToggle[index] = false;
      this.col = document.getElementsByClassName("resize")[index];
      this.col.className = "col-lg-2 col-md-2 col-sm-12 col-xs-12 resize";

    } else {

      this.col = document.getElementsByClassName("resize")[index];
      this.col.className = "col-lg-3 col-md-3 col-sm-12 col-xs-12 resize";

      this.detailToggle.fill(false);
      this._data.getCoin(coin).subscribe(res => {
        this.details = res["DISPLAY"][coin]["USD"];
        this.detailToggle[index] = true;
        this._data.getChart(coin).subscribe(res => {
          let coinHistory = res["Data"].map(a => a.close);

          setTimeout(() => {
            this.chart[index] = new Chart("canvas" + index, {
              type: "line",
              data: {
                labels: coinHistory,
                datasets: [
                  {
                    data: coinHistory,
                    borderColor: "#3cba9f",
                    fill: false
                  }
                ]
              },
              options: {
                tooltips: {
                  callbacks: {
                    label: function(tooltipItems, data) {
                      return "$" + tooltipItems.yLabel.toString();
                    }
                  }
                },
                responsive: true,
                legend: {
                  display: false
                },
                scales: {
                  xAxes: [
                    {
                      display: false
                    }
                  ],
                  yAxes: [
                    {
                      display: false
                    }
                  ]
                }
              }
            });
          }, 250);
        });
      });
    }
  }

【问题讨论】：

标签： javascript html angular twitter-bootstrap

【解决方案1】：

尽量避免在 Angular 上使用 DOM 操作，而是使用 ngClass (https://angular.io/api/common/NgClass)，在你的 html 中你应该有这样的东西：

<div *ngFor="let coin of coins">
 <div [ngClass]="coinStyle(coin.coinStatus)" (click)="coinDetails(coin, index) || coin.coinStatus=!coin.coinStatus">
 </div>
</div>

在组件上，类似这样：

coinStyle(status): string {
   if (status) {
     return 'col-lg-2 col-md-2 col-sm-12 col-xs-12 resize';
   } else {
     return 'col-lg-3 col-md-3 col-sm-12 col-xs-12 resize';
   }
}

并删除您的 coinDetails 函数上的 DOM 操作。

 this.col = document.getElementsByClassName("resize")[index];
 this.col.className = "col-lg-3 col-md-3 col-sm-12 col-xs-12 resize";
 this.col = document.getElementsByClassName("resize")[index];
 this.col.className = "col-lg-3 col-md-3 col-sm-12 col-xs-12 resize";

（那 4 行）。

P.s 很抱歉，但由于您没有分享您的 HTML，我无法为您提供更好的指南。

【讨论】：