Изменение имен классов после нажатия на него в JavaScript - PullRequest
Новая
       34

Изменение имен классов после нажатия на него в JavaScript

0 голосов
/ 07 июня 2018

Я использую Angular 6 и Bootstrap.Я пытаюсь изменить имена классов после щелчка (чтобы изменить его размер), используя document.getElementsByClassName.Я создал свои элементы, используя *ngFor.После нажатия на них coinDetails(coin,i) начинает работать функция.

. Прямо сейчас, после нажатия на элемент, он увеличивает размер (класс меняется на: col-lg-2 col-md-2 col-sm-12 col-xs-12 resize), а после повторного нажатия на тот же элемент, он уменьшаетsize (класс меняется на: col-lg-3 col-md-3 col-sm-12 col-xs-12 resize), как я и хотел.

Но когда я нажимаю на один элемент, а затем на другой (index меняется), первый остается увеличенным.

Я не знаю, как определить, изменилась ли переменная index.

Возможно, скриншот объяснит это лучше.В этой ситуации я нажал на поле «LTC» в начале, а затем на поле «STRAT».«STRAT» увеличил размер, но «LTC» также остался увеличенным, хотя уже не активным.Я хотел бы, чтобы этот блок 'LTC' был такого же размера, как 'ZEC' или 'BTE' после того, как он перестал быть активным.

image

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

1 Ответ

0 голосов
/ 07 июня 2018

Старайтесь избегать использования DOM-манипуляций на Angular, вместо этого используйте 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';
   }
}

И удалите манипуляцию DOM в вашей функции coinDetails. 

 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 Извините, но вы не поделилисьHTML Я не могу дать вам лучшее руководство.

...