jquery特定の単語のCSSを変更する

Question

私はこの回答をしばらく検索していましたが、これに関する特定の情報は見つかりませんでした。

言葉で表現すると、 私はクラスの特定の単語の色を変更したいと思います。

例： クラスに「Online」という単語が含まれている場合、緑色になります。 クラスに「オフライン」という単語が含まれている場合は、赤になります。コードのための今

：

<section class="even"> 
       <h5>Voltz 2.0.4</h5> 
       <span class="tag version"><span>1.5.2</span></span> 
       <div class="serverinfo"> 
        <p>Status: <span class="status"></span></p> 
        <p>Players: <span class="voltz-onlineplayers"></span>/<span class="voltz-maxonlineplayers"></span></p> 
        <p>IP: voltz.arcadia.eu</p> 
       </div> 
       <a class="button" href="vote.html#voltz">Vote</a> 
       <a class="button" href="modpacks.html#voltz">Modpack Info</a> 
      </section> 

クラスヴォルツ-オンラインは、オンライン単語に記入またはオフラインサーバーの応答にに関してするか（すでに行われて）。

しかし、クラスステータスにオンラインまたはオフラインという単語が含まれているかどうかを確認したいと思います。 私はその効果を得るために何を使うべきかについて完全にはわかりません。

私はこの機能を使用しなければならないと確信していますが、それは私が得た限りです。

$(document).ready(function() { 
     //code to change color here. 
    }); 

誰かが例コードでこれを説明できるなら、私は素晴らしいだろう。 そして、あなたが情報に

編集が欠落している場合質問をすること自由に感じ： は、私は物事はもう少しシンプルにするために何を意味するかの視覚的な例を与えます。

オンラインではハイライトされたテキストが緑色になり、オフラインでは赤色になります。

Answer 1

@ジョエルの答えははるかに優れていますが、jQueryで解決策を尋ねたので、これは役に立ちます。

$(document).ready(function() { 
    var status = $('.status'); 
    if(status.hasClass('voltz-online')) { 
      status.css('color', 'green'); 
    } else if (status.hasClass('voltz-offline')) { 
      status.css('color', 'red'); 
     } 
}); 

Answer 2

これはCSSで簡単に行うことができます。

[class*=online] { 
    color: green; 
} 
[class*=offline] { 
    color: red; 
} 

このCSSセレクタはclassという名前の属性を持つ任意の要素を探していると*=次の文字列は、その属性の値内のどこかに存在するかどうか見て、ブラウザを語っています。

したがって、something-onlineまたはoffline-somethingという名前のクラス、または任意の組み合わせがこのセレクタと一致します。

この同じセレクタをjqueryで使用してCSSスタイルを設定できますが、このためにスクリプトを使用する必要はありません。

編集：属性セレクタのリファレンスへのリンクを提供するためのUndoingTechに

感謝。私はそれを簡単に見つけるために答えに含めていますhttp://www.w3schools.com/css/css_attribute_selectors.asp

属性セレクタは非常に強力で、しばしば見落とされています。 jQueryはCSSセレクタを使用するため、すべての属性セレクタもスクリプトで動作します。

編集：元の質問に明確に基づいて

、ここではその要素の内のテキストに基づいて特定のクラスを持つ要素のcolorスタイルを変更するための適切な解決策です。

$(function() { 
    $(".status").each(function() { 
    var text = $(this).text().trim().toLowerCase(); 
    if (text === "offline") { 
     $(this).css("color", "red"); 
    } else if (text === "online") { 
     $(this).css("color", "green"); 
    } 
    }); 
}); 

このコードは、各要素をループし、各要素に対して一度インライン関数を呼び出し.each()次いで、.statusクラスを持つすべての要素を見つけます。この関数はすべてのテキストをトリミングして小文字に変換し、そのテキストの値を「オフライン」または「オンライン」のいずれかと比較し、それに応じて要素のCSS色を設定します。

Answer 3

写真を投稿していただきありがとうございます。それは本当に物事をクリアした。

ここにはjQueryソリューションがあります。 1ページに複数のステータスがあるかどうかはわかりませんでしたので、複数のステータスがある場合に備えて動作させました。

$(document).ready(function() { 
 
     var status = $(".status"); 
 
     status.each(function(index) { 
 
      if ($(this).text() == "Online") { 
 
      $(this).css("color", "green"); 
 
      } else { 
 
      if ($(this).text() == "Offline") { 
 
       $(this).css("color", "red"); 
 
      } // end if 
 
      } // enf else 
 
     }); // end each 
 
     }); // end ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<section class="even"> 
 
    <h5>Voltz 2.0.4</h5> 
 
    <span class="tag version"><span>1.5.2</span></span> 
 
    <div class="serverinfo"> 
 
    <p>Status: <span class="status">Offline</span> 
 
    </p> 
 
    <p>Players: <span class="voltz-onlineplayers"></span>/<span class="voltz-maxonlineplayers"></span> 
 
    </p> 
 
    <p>IP: voltz.arcadia.eu</p> 
 
    </div> 
 
    <a class="button" href="vote.html#voltz">Vote</a> 
 
    <a class="button" href="modpacks.html#voltz">Modpack Info</a> 
 
</section>

私はjQuery selecor.each()にこの便利なドキュメントなしでこの答えをしたことができませんでした。