Question

我正在继续制作Loot Bot模拟器，我差不多完成了物品日志！按钮工作并列出收集的项目。现在我希望它根据是正常，稀有，史诗还是传奇来为文本着色。它说它在一开始就是什么样的罕见。任何简单的方法？

此外，我希望它能够显示他们拥有的传奇，史诗，Rares和法术的数量。它也应该在下面的图像中。

圈出的蓝色位是我想要改变的：

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

CSS

如果您需要更多文件，请询问！我没有展示animate.css，chance.js，loot.js或spec-loot.js

Answer 1

您似乎已经在列表项中添加了一些类，主要是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);

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

1 个答案: