代替の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

ウェブサイトやアプリのトリガーに基づいてアイコンの色を変更する方法を示すコードスニペットを確認してください。

ここで私のトリガーはonMouseOverですので、実際にはあなたのアプリケーションでMySQLのクエリ、シグナル、またはあなたが述べたようにアイコンのIDによって起動されます。また

$('#iconA').mouseover(function(){ 
 
    $('#iconA').addClass('isRED'); 
 
}); 
 

 
$('#iconB').mouseover(function(){ 
 
    $('#iconB').addClass('isGREEN'); 
 
}); 
 

 
$('#iconC').mouseover(function(){ 
 
    $('#iconC').addClass('isBLUE'); 
 
});

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

<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>

、またはのは、次のように加えて、あなたはアイコンの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'); 
} 

Answer 2

まず、それは次のようになりますたとえば、.icon-flagのような、すべてのアイコンに適用されるスタイルを含むジェネリッククラスを作成することをお勧めします。あなた自身を繰り返さないようにするか、.icon-flag1, .icon-flag-2, .icon-flag-3 {}などのセレクタを使用します。個々のアイコン（たとえば、背景イメージ）を設定するために使用する必要があります。

次に、「state」スタイルを追加します（たとえば、.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>