如何根據文本中的類別/單詞設置文本的顏色？
[英]How to set text's colour based on a class/words in the text?
問題描述
我正在繼續制作Loot Bot模擬器，並且快要完成項目日志了！ 該按鈕起作用並列出收集的項目。 現在，我希望它根據是正常，稀有，史詩還是傳奇來為文本着色。 它說一開始是什么類型的稀有。 有什么簡單的方法嗎？
我也希望它顯示它們的傳奇，史詩，稀有和法線的數量。 它也應該在下面的圖像中。
藍色圓圈是我要更改的內容：
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Home |OWLBS</title>
<link rel="icon" type="image/png" href="favicon.png">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/animate.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type=text/css>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,600,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/chance.js"></script>
<script type="text/javascript" src="js/loot.js"></script>
<script type="text/javascript" src="js/spec-loot.js"></script>
<script type="text/javascript" src="js/engine.js"></script>
<body>
<header>
<nav>
<div class="grid">
<div class="grid__item large--one-third logo">
<h1>
<a href="index.html" class="logo"><span class="loot">OW</span><span class="junkie">LBS</span></a>
<span class="version">This is not made by me, I edited another file!</span>
</h1>
</div>
<div class="grid__item large--two-thirds medium-down--hide nav">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="changelog.html">Changelog</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="wrapper">
<div class="grid">
<div class="grid__item item-section">
<img id="box" src="images/loot-box.png" alt="Loot Box">
<ul id="crate"></ul>
</div>
</div>
</div>
<div class="small-wrapper">
<div class="grid">
<div class="grid__item center">
<a class="btn yellow" onclick="openBox()" onmouseover="shakeBox()">OPEN LOOT BOX</a>
<a class="btn blue btn-toggle" onclick="itemLog(this)" id="plus" href="#">Item Log <i id="bt" aria-hidden="true"></i></a>
<div class="grid__item center">
<ul id="itemlog" style="display: none;" class="in-use"></ul>
</div>
<div class="grid__item center stats">
<div class="grid center">
<div class="grid__item one-quarter small--one-whole">
<p>Normal: <span id="white-stat">0</span></p>
</div>
<div class="grid__item one-quarter small--one-whole">
<p>Rare: <span id="blue-stat">0</span></p>
</div>
<div class="grid__item one-quarter small--one-whole">
<p>Epic: <span id="purple-stat">0</span></p>
</div>
<div class="grid__item one-quarter small--one-whole">
<p>Legendary: <span id="orange-stat">0</span></p>
</div>
</div>
</div>
</div>
<div class="grid__item center">
<div class="note"> Only for overwatch fans!</div>
</div>
</div>
</div>
</body>
</html>
JS（引擎）：
var crate
var openSound = new Audio('open-box.ogg');
var results = [];
var isRunning = false;
$.fn.extend({
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$(this).addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
});
function itemLog(btn) {
var hide = document.getElementById("itemlog")
if (btn.id.match("plus")) {
btn.id = "minus";
hide.style.display = "block";
}
else {
btn.id = "plus";
hide.style.display = "none";
}
}
function openBox(){
if(isRunning == false){
//Reset Crate
results = [];
setTimeout(delay,1750);
setTimeout(hideBox,750);
setTimeout(deleteCards,1050);
openSound.play();
$('#box').animateCss('bounceOutUp');
$('#item0').animateCss('bounceOutUp');
$('#item1').animateCss('bounceOutUp');
$('#item2').animateCss('bounceOutUp');
$('#item3').animateCss('bounceOutUp');
isRunning = true;
}
}
function deleteCards(){
$( "#item0" ).remove();
$( "#item1" ).remove();
$( "#item2" ).remove();
$( "#item3" ).remove();
}
function hideBox(){
$( "#box" ).remove();
}
function delay(){
setTimeout(setBox,250);
}
function setBox(){
for(i = 0; i < 3; i++){
//Randomize Loot
crate = chance.weighted(loot, weights);
results.push(crate);
console.log(crate);
}
cratespec = chance.weighted(specloot, specweights);
results.push(cratespec);
endresults = chance.shuffle(results);
displayBox();
}
function displayBox(){
//Add to list
for(i = 0; i < endresults.length; i++){
var ul = document.getElementById("crate");
var li = document.createElement("li");
var span = document.createElement("span");
var node = document.createElement("LI");
span.appendChild(document.createTextNode(endresults[i]));
li.setAttribute("id", "item" + i);
ul.appendChild(li);
li.appendChild(span);
//Check Quality and Strip
var str = $("#item" + i).text();
console.log(str);
var textnode = document.createTextNode(str);
node.appendChild(textnode)
document.getElementById("itemlog").appendChild(node);
if(endresults[i].indexOf("Normal") !=-1){
$("#item" + i).addClass("normal animated bounceInDown");
$("#item" + i ).find('span').text(str.substring(7));
}
if (endresults[i].indexOf("Rare") !=-1){
$("#item" + i).addClass("rare animated bounceInDown");
$("#item" + i).find('span').text(str.substring(5));
}
if(endresults[i].indexOf("Epic") !=-1){
$("#item" + i).addClass("epic animated bounceInDown");
$("#item" + i).find('span').text(str.substring(5));
}
if(endresults[i].indexOf("Lgnd") !=-1){
$("#item" + i).addClass("legendary animated bounceInDown");
$("#item" + i).find('span').text(str.substring(5));
}
//Check Hero
//Generic
if(endresults[i].indexOf("Spray") || endresults[i].indexOf("Coins") !=-1){
$("#item" + i).addClass("generic");
}
//orisa
if(endresults[i].indexOf("Orisa") !=-1){
$("#item" + i).addClass("orisa");
}
//sombra
if(endresults[i].indexOf("Sombra") !=-1){
$("#item" + i).addClass("sombra");
}
//ana
if(endresults[i].indexOf("Ana") !=-1){
$("#item" + i).addClass("ana");
}
//bastion
if(endresults[i].indexOf("Bastion") !=-1){
$("#item" + i).addClass("bastion");
}
//dva
if(endresults[i].indexOf("D.Va") !=-1){
$("#item" + i).addClass("dva");
}
//genji
if(endresults[i].indexOf("Genji") !=-1){
$("#item" + i).addClass("genji");
}
//hanzo
if(endresults[i].indexOf("Hanzo") !=-1){
$("#item" + i).addClass("hanzo");
}
//junkrat
if(endresults[i].indexOf("Junkrat") !=-1){
$("#item" + i).addClass("junkrat");
}
//lucio
if(endresults[i].indexOf("Lucio") !=-1){
$("#item" + i).addClass("lucio");
}
//McCree
if(endresults[i].indexOf("McCree") !=-1){
$("#item" + i).addClass("mccree");
}
//Reaper
if(endresults[i].indexOf("Reaper") !=-1){
$("#item" + i).addClass("reaper");
}
//Mei
if(endresults[i].indexOf("Mei") !=-1){
$("#item" + i).addClass("mei");
}
//Mercy
if(endresults[i].indexOf("Mercy") !=-1){
$("#item" + i).addClass("mercy");
}
//Pharah
if(endresults[i].indexOf("Pharah") !=-1){
$("#item" + i).addClass("pharah");
}
//Reinhardt
if(endresults[i].indexOf("Reinhardt") !=-1){
$("#item" + i).addClass("reinhardt");
}
//Roadhog
if(endresults[i].indexOf("Roadhog") !=-1){
$("#item" + i).addClass("roadhog");
}
//Solider76
if(endresults[i].indexOf("Soldier: 76") !=-1){
$("#item" + i).addClass("soldier");
}
//Symmetra
if(endresults[i].indexOf("Symmetra") !=-1){
$("#item" + i).addClass("symmetra");
}
//Torbjorn
if(endresults[i].indexOf("Torbjorn") !=-1){
$("#item" + i).addClass("torbjorn");
}
//Tracer
if(endresults[i].indexOf("Tracer") !=-1){
$("#item" + i).addClass("tracer");
}
//Widowmaker
if(endresults[i].indexOf("Widowmaker") !=-1){
$("#item" + i).addClass("widowmaker");
}
//Winston
if(endresults[i].indexOf("Winston") !=-1){
$("#item" + i).addClass("winston");
}
//Zarya
if(endresults[i].indexOf("Zarya") !=-1){
$("#item" + i).addClass("zarya");
}
//Zenyatta
if(endresults[i].indexOf("Zenyatta") !=-1){
$("#item" + i).addClass("zenyatta");
}
}
isRunning = false;
}
function shakeBox(){
$("#box").addClass("shakebox");
setTimeout(removeShake,820);
}
function removeShake(){
$("#box").removeClass("shakebox");
setTimeout(shakeBox,1820);
}
如果您需要更多文件，請詢問！ 我沒有顯示animate.css，偶然.js，loot.js或spec-loot.js
1 個解決方案
解決方案1
0 已采納 2017-05-12 16:24:18
看起來您已經在列表項中添加了一些類，主要是normal ， rare ， epic和legendary 。 為什么不添加一些相應的CSS規則？ 例如：
.normal {
color: gray;
}
.rare {
color: green;
}
.epic {
color: purple;
}
.legendary {
color: gold;
}
編輯您應該嘗試將與您的卡片相同的類添加到textnodes ，然后將這些類用於適當的CSS。 例如：
//Check Quality and Strip
var str = $("#item" + i).text();
console.log(str);
var textnode = document.createTextNode(str);
document.getElementById("itemlog").appendChild(node);
if(endresults[i].indexOf("Normal") !=-1){
$("#item" + i).addClass("normal animated bounceInDown");
$("#item" + i ).find('span').text(str.substring(7));
// Add 'normal' class to textnode
textnode.className = 'normal';
}
if (endresults[i].indexOf("Rare") !=-1){
$("#item" + i).addClass("rare animated bounceInDown");
$("#item" + i).find('span').text(str.substring(5));
// etc.
textnode.className = 'rare';
}
if(endresults[i].indexOf("Epic") !=-1){
$("#item" + i).addClass("epic animated bounceInDown");
$("#item" + i).find('span').text(str.substring(5));
textnode.className = 'epic';
}
if(endresults[i].indexOf("Lgnd") !=-1){
$("#item" + i).addClass("legendary animated bounceInDown");
$("#item" + i).find('span').text(str.substring(5));
textnode.className = 'legendary';
}
node.appendChild(textnode);
如何根據動態變化的背景顏色動態更改文本顏色
[英]How to dynamically change text colour based on dynamically changing background colour
如何根據 Firebase 中的數據向按鈕添加條件（顏色、文本）
[英]How to add conditions ( colour, text) to button based on data from Firebase
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.