jQueryで特定文字列が含まれているか判定する|:contains()

jQueryで特定文字列が含まれているか判定する|:contains() javascript
この記事は約3分で読めます。
スポンサーリンク

特定文字列が含まれている時、手間かかるかもと思っていたけどif文も書かずにクリア出来て嬉しかったのでご紹介します。
今回はリストの中に、特定文字が存在していたらを判断します。

下のボタンを押して特定文字列が含まれる文字色を変更します。

  • Google
  • Apple
  • Facebook
  • Amazon
「Google」を赤にする
「Apple」を黒にする
「Facebook」を青にする
「Amazon」をオレンジにする
色をもとに戻す

HTML

<div class="demo1">
 <p>下のボタンを押して特定文字列が含まれる文字色を変更します。</p>
 <ul>
  <li>Google</li>
  <li>Apple</li>
  <li>Facebook</li>
  <li>Amazon</li>
 </ul>
 <div class="btn">「Google」を赤にする</div>
 <div class="btn2">「Apple」を黒にする</div>
 <div class="btn3">「Facebook」を青にする</div>
 <div class="btn4">「Amazon」をオレンジにする</div>
 <div class="btn5">色をもとに戻す</div>
</div>

jQuery

// Googleボタン
$(".demo1 .btn").on("click", function(){
 var txt = "Google";
 $(".demo1 li:contains(" + txt + ")").css({color: "#e24f72"});
});
// Appleボタン
$(".demo1 .btn2").on("click", function(){
 var txt = "Apple";
 $(".demo1 li:contains(" + txt + ")").css({color: "#4e4e4e"});
});
// Facebookボタン
$(".demo1 .btn3").on("click", function(){
 var txt = "Facebook";
 $(".demo1 li:contains(" + txt + ")").css({color: "#1c70c8"});
});
// Amazonボタン
$(".demo1 .btn4").on("click", function(){
 var txt = "Amazon";
 $(".demo1 li:contains(" + txt + ")").css({color: "#e78433"});
});
// もとに戻すボタン
$(".demo1 .btn5").on("click", function(){
 $(".demo1 li").css({color: "#cccccc"});
});
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました