텍스트의 클래스/단어를 기반으로 텍스트의 색을 설정하는 방법은 무엇입니까?

전리품 봇 (Loot Bot) 시뮬레이터를 만들고 있는데 Item Log를 거의 완성했습니다! 버튼이 작동하고 수집 된 항목이 나열됩니다. 이제는 일반, 희귀, 서사 또는 전설을 기준으로 텍스트의 색상을 지정하겠습니다. 그것은 그것의 시작 부분에 어떤 희귀 성이 있는지 말합니다. 쉬운 방법?텍스트의 클래스/단어를 기반으로 텍스트의 색을 설정하는 방법은 무엇입니까?

또한 전설, 에픽, 레어 및 법선의 양을 보여주고 싶습니다. 그것은 또한 아래 이미지에 있어야합니다.

원 파란색 비트는 내가 변경하려는 것입니다 :

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

더 이상 파일이 필요하면 꼭 물어보십시오! 나는 당신이 이미 목록 항목, 주로 normal, rare, epic에 몇 가지 클래스를 추가하는 것처럼

출처

2017-05-12 Cyan Coder

텍스트 상자를 채우는 코드는 어디에 있습니까? – SpyderScript

@SpyderScript 항목 로그 :

–

@SpyderScript 일반, 전설, 희귀 및 에픽 카운터의 경우 : https://pastebin.com/LxchM1Fd –

이 보이는 animate.css, chance.js, loot.js 또는 사양-loot.js을 표시하고,하지 legendary. CSS 규칙을 추가하지 않는 이유는 무엇입니까? 예를 들어 :

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

편집 적절한 CSS를 위해 해당 클래스를 당신이대로 다음, 당신의 카드에 textnodes에 동일한 클래스를 추가 사용하려고합니다. 예 :

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

출처

2017-05-12 16:24:18 SpyderScript

그들은 이미 색상을 가지고 있으며 카드 용입니다. 센서를 만들면 정상적인 단어가 회색으로 변할 수 있습니까? –

? 답장 하시겠습니까? –

@CyanCoder 편집을 참조하십시오. – SpyderScript

텍스트의 클래스/단어를 기반으로 텍스트의 색을 설정하는 방법은 무엇입니까?

답변

관련 문제