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>

Answer 2

请查看此代码段，其中显示了如何根据您网站或应用中的某些触发器更改图标颜色。

出于演示目的，我的触发器是 onMouseOver ，因此您可以看到它在运行中，在您自己的应用程序中它当然会被MySQL查询，信号或图标的ID触发如你所说。

＆＃13;

$('#iconA').mouseover(function(){
   $('#iconA').addClass('isRED');
});

$('#iconB').mouseover(function(){
   $('#iconB').addClass('isGREEN');
});

$('#iconC').mouseover(function(){
   $('#iconC').addClass('isBLUE');
});

＆＃13;

.isRED { color: red; }
.isGREEN { color: green; }
.isBLUE { color: blue; }

＆＃13;

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<div class="myClass">
 <i id="iconA" class="icon-flag1">X</i>
 <i id="iconB" class="icon-flag2">X</i>
 <i id="iconC" class="icon-flag3">X</i>
</div>

＆＃13;

或者，或者让我们另外说，您可以根据图标的ID设置颜色类，如下所示：

if( $('#iconA').hasClass('icon-flag1') )
{
   $('#iconA').addClass('isRED');
} else if( $('#iconA').hasClass('icon-flag2') )
{
   $('#iconA').addClass('isGREEN');
} if( $('#iconA').hasClass('icon-flag3') )
{
   $('#iconA').addClass('isBLUE');
}

通过数据库标志替代CSS

2 个答案: