新規投稿
フォローする

カレンダー表示時のタイトル文字色変更について

https://developer.cybozu.io/hc/ja/community/posts/201107004-%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC%E4%B8%8A%E3%81%A7%E3%81%AE%E6%9B%B8%E5%BC%8F-%E6%96%87%E5%AD%97%E8%89%B2-%E5%A4%89%E6%9B%B4

こちらを参考に作成してみたのですが、複数条件時の書き方がわかりませんでした。 
カレンダーのタイトルに「AA」を含む場合は赤、「BB」を含む場合は青、「CC」を含む場合は緑、それ以外は黒、としたいです。

(function() { 
"use strict";

// カレンダービュー 
kintone.events.on('app.record.index.show', function(event) { 
// カレンダービューの表示時にフィールド値の条件に応じて、文字色、フィールドの背景色を変更する 
var eles = document.getElementsByClassName("cellitem-value-gaia"); 
for (var i = 0, il = eles.length; i < il; i++) { 
var ele = eles[i]; 
// eleに「〇〇」が含まれていたら、文字色を変更 
if (ele.textContent.indexOf("AA") >= 0) { 
ele.style.color = 'red'; 
ele.style.fontWeight = 'bold'; 

if (ele.textContent.indexOf("BB") >= 0) { 
ele.style.color = 'blue'; 
ele.style.fontWeight = 'bold'; 

if (ele.textContent.indexOf("CC") >= 0) { 
ele.style.color = 'green'; 
ele.style.fontWeight = 'bold'; 
} else { 
ele.style.color = 'black'; 
ele.style.fontWeight = 'normal'; 


}); 
})();

上記だと、一番最後の「CC」は条件が適用されるのですが、「AA」や「BB」は色がelseの場合と判断され、黒の表示になってしまいます。

初心者となり初歩的な質問となりますが、アドバイスいただけないでしょうか。 
よろしくお願いします。

0

2件のコメント

Avatar
takasakai

それぞれのif文が独立しているため、AAが含まれていてredになってもCCが含まれていないのでblackに上書きされてしまっています。
下記のようにelseで繋げれば期待されている動きになるかと思います。

if (ele.textContent.indexOf("AA") >= 0) { 
ele.style.color = 'red'; 
ele.style.fontWeight = 'bold'; 
} else if (ele.textContent.indexOf("BB") >= 0) { 
ele.style.color = 'blue'; 
ele.style.fontWeight = 'bold'; 
} else if (ele.textContent.indexOf("CC") >= 0) { 
ele.style.color = 'green'; 
ele.style.fontWeight = 'bold'; 
} else { 
ele.style.color = 'black'; 
ele.style.fontWeight = 'normal'; 

0
Avatar
Maru

takasakaiさん

教えていただきありがとうございます。

それぞれをelse if でつなげることにより、期待する動きになりました!!

ありがとうございました。

0
サインインしてコメントを残してください。