首页 文章

离子文字颜色改变onlick

提问于
浏览 次
0

我是Ionic 3的初学者 .

我有一个相同颜色的4个文本，当我点击4个文本时，我想要改变颜色 .

例
我点击第一个文字，然后我想改变它的黑色我点击文字2，然后我想改变黑色，第一个文字被设置为默认颜色，

请帮我解决这个问题

<div class="row">
      <div  class="col right-border">
        <div  text-center>
          <h2 class="main-one" >$ 2,300</h2> <p class="main-txt-home">Today's Revenue</p>
        </div>
      </div>
      <div  class="col bottom-border">
        <div text-center>
          <h2  class="main-one">$ 53,100</h2><p class="main-txt-home">Expected Revenue for this month</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div  class="col top-border">
        <div  text-center>
          <h2  class="main-one">12</h2><p class="main-txt-home"> Bookings taken today</p>
        </div>
      </div>
      <div class="col left-border">
        <div  text-center>
          <h2  class="main-one">68%</h2><p class="main-txt-home">Total Monthly occupancy</p>
        </div>
      </div>
    </div>
  </div>
ionic-framework ionic3

1 回答

  • 1

    您可以使用[ngClass]属性来实现此目的 . 这可用于根据最后单击的文本动态返回类名 . 代码将如下所示 .

    <div class="row">
  <div  class="col right-border">
    <div  text-center [ngClass]="getTextColor('text1')" (click)="setSelectedText('text1')">
      <h2 class="main-one" >$ 2,300</h2> <p class="main-txt-home">Today's Revenue</p>
    </div>
  </div>
  <div  class="col bottom-border">
    <div text-center [ngClass]="getTextColor('text2')"  (click)="setSelectedText('text2')">
      <h2  class="main-one">$ 53,100</h2><p class="main-txt-home">Expected Revenue for this month</p>
    </div>
  </div>
</div>
<div class="row">
  <div  class="col top-border">
    <div  text-center [ngClass]="getTextColor('text3')"  (click)="setSelectedText('text3')">
      <h2  class="main-one">12</h2><p class="main-txt-home"> Bookings taken today</p>
    </div>
  </div>
  <div class="col left-border">
    <div  text-center>
      <h2  class="main-one">68%</h2><p class="main-txt-home">Total Monthly occupancy</p>
    </div>
  </div>
</div>

    在控制器中

    private selecteTextId :string;

 setSelectedText(textId:string) {
     this.selecteTextId = textId;
 }

 getTextColor(textId:string):string{
   return this.selecteTextId == textId? "highlight-color" : "";
 }

    在scss文件中

    .highlight-color {
  color:blue;
}
    回复于

相关问题