javascript - 通过从列表中选择图标来更改图标

Question

简要说明:

我在 home.html 上放置了 1 个图标，并且还有一些图标列表。我只想用我从列表中选择的图标替换图标。下面是我的home.html代码

<ion-item>
<!--Replace below icon by selecting icon from below ion-list -->
        <i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
      </ion-item>

  <ion-list>
    <ion-item>
      <i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
    </ion-item>
    <ion-item>
      <i class="fa fa-battery-1"></i> Battery Level 1
    </ion-item>
    <ion-item>
      <i class="fa fa-battery-2"></i> Battery Level 2
    </ion-item>
    <ion-item>
      <i class="fa fa-battery-3"></i> Battery Level 3
    </ion-item>
    <ion-item>
      <i class="fa fa-battery-4" style="color: green;"></i> Battery Level 4
    </ion-item>
  </ion-list>

我必须对一些 HTML 动态操作使用 DOM 清理器，如果这需要在 home.ts 端使用 JS/jQuery 方式就可以了。

Answer 1

组件端:

battery_level = 'empty'

模板端:

<ion-item>
    <i class="fa fa-battery-{{battery_level}}" 
    [ngStyle]="{'color': battery_level=='empty' ? 'red' : battery_level=='4' ? 'green' : 'black' }"
    ></i> Battery Level {{battery_level}}
</ion-item>

<ion-list>
    <ion-item (click)='battery_level = "empty"'>
        <i class="fa fa-battery-empty" style="color: red;"></i> Battery Level Empty
    </ion-item>
    <ion-item (click)='battery_level = "1"'>
        <i class="fa fa-battery-1"></i> Battery Level 1
    </ion-item>
    <ion-item (click)='battery_level = "2"'>
        <i class="fa fa-battery-2"></i> Battery Level 2
    </ion-item>
    <ion-item (click)='battery_level = "3"'>
        <i class="fa fa-battery-3"></i> Battery Level 3
    </ion-item>
    <ion-item (click)='battery_level = "4"'>
        <i class="fa fa-battery-4" style="color: green;"></i> Battery Level 4
    </ion-item>
</ion-list>

WORKING DEMO