如何根据文本中的类别/单词设置文本的颜色？

Question

I'm continuing on making a Loot Bot simulator and I've nearly finished the Item Log! 我正在继续制作Loot Bot模拟器，并且快要完成项目日志了！ The button works and lists the items collected. 该按钮起作用并列出收集的项目。 Now I want it to colour the text based on whether it was Normal, Rare, Epic or Legendary. 现在，我希望它根据是正常，稀有，史诗还是传奇来为文本着色。 It says what type of rarity it is at the start of it. 它说一开始是什么类型的稀有。 Any easy ways? 有什么简单的方法吗？

Also I want it to show the amount of Legendaries, Epics, Rares and Normals they have. 我也希望它显示它们的传奇，史诗，稀有和法线的数量。 It should be in the image below as well. 它也应该在下面的图像中。

The blue bit circled is what I want changing: 蓝色圆圈是我要更改的内容：

HTML: 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(engine): 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);
}

CSS CSS

If you need any more files just ask! 如果您需要更多文件，请询问！ I haven't shown animate.css, chance.js, loot.js or spec-loot.js 我没有显示animate.css，偶然.js，loot.js或spec-loot.js

Answer 1

Looks like you're already adding some classes to your list items, mainly normal , rare , epic , and legendary . 看起来您已经在列表项中添加了一些类，主要是normal ， rare ， epic和legendary 。 Why not add some corresponding CSS rules? 为什么不添加一些相应的CSS规则？ For example: 例如：

.normal {
  color: gray;
}
.rare {
  color: green;
}
.epic {
  color: purple;
}
.legendary {
  color: gold;
}

EDIT You should try to add the same classes to your textnodes as you are to your cards, then use those classes for the appropriate CSS. 编辑您应该尝试将与您的卡片相同的类添加到textnodes ，然后将这些类用于适当的CSS。 For example: 例如：

//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);

如何根据文本中的类别/单词设置文本的颜色？

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-05-12 16:24:18

如何根据文本中的类别/单词设置文本的颜色？

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-05-12 16:24:18

解决方案1
0 已采纳 2017-05-12 16:24:18