在離子2

的onclick改變特定的按鈕顏色這是我的HTML樣本：在離子2

<ion-col col-6> 
    <button ion-button block (click)="toggleNamedColor()" ion-button [color]="ionicNamedColor"> 
     test 
    </button> 
    </ion-col> 
    <ion-col col-6> 
    <button ion-button block ion-button block (click)="toggleNamedColor()" ion-button [color]="ionicNamedColor"> 
     test 
    </button> 
    </ion-col>

我這裏有大約12個按鈕，我想有自己的顏色被點擊時，他們被單獨改變的列表，所有共享同樣的方法。這裏是打字稿：

export class PopoverComponent { 


public ionicNamedColor: string = 'primary'; 

constructor() { 
} 

public toggleNamedColor(): void { 
    if (this.ionicNamedColor === 'primary') { 
    this.ionicNamedColor = 'light' 
    } else { 
    this.ionicNamedColor = 'primary' 
    } 
}

的問題：現在這個代碼使所有的按鈕改變顏色，點擊其中的任何時候。我怎樣才能改變這個，所以只有特定的按鈕被改變了，而不是改變其他所有的變量？

來源

2017-07-11 M. Fonteles

你能給細節，哪些按鈕的類型，什麼會被打回原形 – Skeptor

它是一個過濾的搜索頁面我開發toggable按鈕的列表。所有的按鈕都應該具有相同的樣式，（我在_variables.scss文件中設置的主要顏色），但是單擊時，它應該更改爲淺色變量，這就是代碼所做的。但它正在改變所有按鈕的ionicNamedColor變量的值，而不僅僅是那一個。 –

嘗試發送$事件您切換功能

<ion-col col-6> 
    <button ion-button block (click)="toggleNamedColor($event)" ion-button color="primary"> 
     test 
    </button> 
</ion-col> 

<ion-col col-6> 
    <button ion-button block ion-button block (click)="toggleNamedColor($event)" ion-button color="primary"> 
     test 
    </button> 
</ion-col>

，然後在你的工作，你需要找到閹click事件從按鈕本身或內部的跨度發送，並相應地更換按鈕類

submit(event) { 
    let prevColor = this.color; 
    if (this.color === 'primary') { 
      this.color = 'light' 
    } else { 
      this.color = 'primary' 
    } 

    if (event.target.localName === 'button') { 
     event.target.className =event.target.className.replace('button-md-' + prevColor, 'button-md-' + this.color); 
    } else if (event.target.parentElement.localName === 'button') { 
     event.target.parentElement.className = event.target.parentElement.className.replace('button-md-' + prevColor, 'button-md-' + this.color); 
    } 
}

來源

2017-07-11 18:31:19

謝謝！這工作。 –

回答

相關問題