數據庫標誌的備用CSS

我有一些標記保存在數據庫中，每個標記都在我的頁面上有一個特定的圖標。數據庫標誌的備用CSS

，如：

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

每當標誌上，e.g：它的 '1'。我需要呼叫用戶的注意力，圖標/標誌將表明他需要注意這個特定的標誌，通過圖標和懸停彈出我有用戶會知道每個圖標的含義。

我的問題是：如何根據數據庫標誌值更改該元素的顏色<i class="icon-flag1"></i>？
或者也許有更簡單的方法來實現這一目標？

來源

2017-01-12 PlayHardGoPro

您正在使用什麼後臺？ –

@KaranShah PHP，laravel框架 – PlayHardGoPro

-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'); 
}

來源

2017-01-12 04:04:46

如何根據數據庫狀態使用這些？我在後端使用PHP。 – PlayHardGoPro

沒有冒犯，但我幾乎不相信這裏的任何人會爲你做代碼。我相信提出的解決方案只涵蓋了您的原始問題。與數據庫相同的任何進一步實現都將成爲新問題中的地址。特別是，我們不知道數據庫的外觀如何，以及爲了做什麼而必須滿足哪些條件。祝你好運 –

有時你只需要後悔幫助新手。你的問題是'如何基於數據庫觸發器改變顏色'。你如何期待我查詢你的數據庫，我看不到？我的代碼根據需要更改顏色，編寫基於數據庫行的IF..THEN語句是您自己的工作。並感謝您的低票，像您這樣的人使這樣的社區變得醜陋。沒有好運祝福你。：@ –

首先，它會創建一個通用類的好主意，例如.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>

來源

2017-01-12 04:11:33 scottgearyau

如何根據數據庫狀態使用這些內容？我在後端使用PHP。 – PlayHardGoPro

數據庫標誌的備用CSS

回答

相關問題