css - 通过数据库标志替换 CSS

Question

我在数据库中保存了一些标志，每个标志在我的页面上都有一个特定的图标。

喜欢:

<div class="myClass">
 <i class="icon-flag1"></i>
 <i class="icon-flag2"></i>
 <i class="icon-flag3"></i>
</div>  

每当标志打开时，例如:它是“1”。我需要引起用户的注意，图标/标志将表明他需要注意这个特定的标志，通过图标和悬停弹出窗口我让用户知道每个图标的含义。

我的问题是:如何更改该元素的颜色 <i class="icon-flag1"></i>根据数据库标志值 ?
或者有没有更简单的方法来实现这个目标？

Answer 1

首先，创建一个通用类是个好主意，例如 .icon-flag 包含将应用于所有图标的样式，这样你不要重复自己，或使用像 .icon-flag1、.icon-flag-2、.icon-flag-3 {} 等选择器，它们应该用于设置单个图标(例如，背景图片)。

然后您将添加“状态”样式，例如 .active、.inactive 以更改字体。

这是一个例子:

// Common styles to all icons
.icon-flag {
  font-size: 20px;
  font-style: normal;
  display: block;
}

 // State styles
.icon-flag.active { color: green; }
.icon-flag.inactive { color: red; }
.icon-flag.deleted { color: grey; font-style: italic; }

// You'd do your different icon backgrounds, etc in here.
//   .icon-flag-1 {}, .icon-flag-2 {}, .icon-flag-3 {}, etc...

<div id="icon-example-1">
  <i class="icon-flag icon-flag-1 active">1</i>
  <i class="icon-flag icon-flag-2 inactive">2</i>
  <i class="icon-flag icon-flag-3 deleted">3</i>
  <i class="icon-flag icon-flag-4 active">4</i>
  <i class="icon-flag icon-flag-5 deleted">5</i>
</div>