JSで特定クラスに含まれるワードを利用して動的にスタイルを変更をしようとしているのですが、うまくいきません...
具体的にはcateという名前のクラスがHTMLに9つあり、そのクラス内のinnerHTMLに付与されている地方の名前ごとにswitchでCSSを書き換える処理を分岐させています。
以下ソースです。
JavascriptSource
1function categorize(){ 2 var targets=document.getElementsByClassName("cate") 3 for(var i = 0; i < targets.length; i++) { 4 if(targets[i].innerHTML=="北海道") 5 { 6 console.log("out"); 7 } 8 switch(targets[i].innerHTML) 9 { 10 11 case "北海道": 12 targets[i].style.color="black"; 13 targets[i].style.backgroundcolor="#ffffff"; 14 break; 15 case "東北": 16 targets[i].style.color="black"; 17 targets[i].style.backgroundcolor="#eeeeee"; 18 break; 19 case "関東": 20 targets[i].style.color="black"; 21 targets[i].style.backgroundcolor="#55ccff"; 22 break; 23 case "中部": 24 targets[i].style.color="black";FFA500 25 targets[i].style.backgroundcolor="green"; 26 break; 27 case "四国": 28 targets[i].style.color="black";console.log 29 targets[i].style.backgroundcolor="#FF7F50"; 30 break; 31 case "中国": 32 targets[i].style.color="black"; 33 targets[i].style.backgroundcolor="#F0E68C"; 34 break; 35 case "九州": 36 targets[i].style.color="black"; 37 targets[i].style.backgroundcolor="FFA500"; 38 break; 39 case "近畿": 40 targets[i].style.color="black"; 41 targets[i].style.backgroundcolor="#DC143C"; 42 break; 43 default: 44 break; 45 } 46 } 47}
HTMLソースです。(該当箇所)
HTML
1<div class="flex"> 2 3 4 <div class="link"> 5 <a href="/article/30"> 6 <span class="cate"> 雑学 </span> 7 <img src="/static/img/thumbnail/74b47d4a-319c-4b07-bb5c-bb11b7b9e3e2.PAK42_syachikunoannei1323_TP_V.jpg" ></img> 8 <p>学生、サラリーマン必見!朝夕の満員列車を避ける方法 </p> 9 </a> 10 </div> 11 12 13 14 <div class="link"> 15 <a href="/article/10"> 16 <span class="cate"> 北海道 </span> 17 <img src="/static/img/thumbnail/9f43e19b-3545-4acb-956d-8294f23ad512.jpg" ></img> 18 <p>北海道旅行のすすめ(期間、予算、おすすめお土産、持ち物) </p> 19 </a> 20 </div> 21 22 23 24 <div class="link"> 25 <a href="/article/15"> 26 <span class="cate"> 関東 </span> 27 <img src="/static/img/thumbnail/ae67c2f8-eb1f-4268-aebd-0e8dffcec1e6.jpg" ></img> 28 <p>東京観光のすすめ </p> 29 </a> 30 </div> 31 32 33 34 <div class="link"> 35 <a href="/article/24"> 36 <span class="cate"> 雑学 </span> 37 <img src="/static/img/thumbnail/d7d497da-a5b9-4a13-b55d-ca712f214920.tnzatugaku3.jpg" ></img> 38 <p>わかりやすく学ぶ民泊<基礎編> </p> 39 </a> 40 </div> 41 42 43 44 <div class="link"> 45 <a href="/article/28"> 46 <span class="cate"> 雑学 </span> 47 <img src="/static/img/thumbnail/97ad5796-5883-4978-be89-69de1d927231.tnzatugaku7.jpg" ></img> 48 <p>わかりやすく学ぶ民泊<魅力編> </p> 49 </a> 50 </div> 51 52 53 54 <div class="link"> 55 <a href="/article/29"> 56 <span class="cate"> 雑学 </span> 57 <img src="/static/img/thumbnail/304f15a6-de30-4555-ac37-2c960208d763.tnzatugaku8.jpg" ></img> 58 <p><航空券を買うベストなタイミングとは?> </p> 59 </a> 60 </div> 61 62 63 64 <div class="link"> 65 <a href="/article/7"> 66 <span class="cate"> 北海道 </span> 67 <img src="/static/img/thumbnail/ae0f7c09-2b0d-452e-89ab-03da13e29663.jpg" ></img> 68 <p>旅行愛好家が勧める道東のここだけは行くべき観光スポット7選 </p> 69 </a> 70 </div> 71 72 73 74 <div class="link"> 75 <a href="/article/8"> 76 <span class="cate"> 北海道 </span> 77 <img src="/static/img/thumbnail/cf61d0c2-8fd5-4557-9bef-4d17f25d964a.jpg" ></img> 78 <p>旅行愛好家が勧める道北のここだけは行くべき観光スポット </p> 79 </a> 80 </div> 81 82 83 84 <div class="link"> 85 <a href="/article/9"> 86 <span class="cate"> 北海道 </span> 87 <img src="/static/img/thumbnail/9e2672a7-e7f2-4388-ba38-35eac94a4cda.jpg" ></img> 88 <p>旅行愛好家が勧める札幌のここは行くべき観光スポット10選 </p> 89 </a> 90 </div> 91 92 93 <script type="text/javascript"> 94 categorize(); 95 </script> 96 </div>
コンソールログの出力がoutが9つだった(HTMLソース内で書き換えたい箇所は合計9つ、そしてinnerHTML内に北海道は必ず入る箇所がある)ことより、innerHTMLと文字列の比較は正しくないと推定しました。しかしどこ探してもinnerHTMLの比較についての情報がないため非常に困っております。どなたかご教授よろしくお願いいたします・
回答2件
あなたの回答
tips
プレビュー