teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

一部確認漏れがあったので修正

2018/04/05 10:17

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -14,7 +14,7 @@
14
14
  (function($){
15
15
  //対象のフルーツ一覧取得
16
16
  var fluits_list = $(".fluits p");
17
-
17
+
18
18
  //チェックボックスのチェック状態により作動
19
19
  $('.check').change(function(){
20
20
  //チェックされているボックスの情報を全て取る
@@ -23,19 +23,22 @@
23
23
  });
24
24
 
25
25
  //半角スペースで結合
26
- color_list = color.get().join(" ");
27
-
28
- if(color_list == ""){
26
+ if(color.length == 0){
29
27
  fluits_list.css('color', '#ddd');
30
28
  }else{
31
29
  //フルーツ一覧をループ
32
30
  for(i=0;i<fluits_list.length;i++){
31
+ hasCount = 0;
33
- //対象のクラスを持っていれば黒に
32
+ for(colori=0;colori<color.length;colori++){
34
- if($(fluits_list[i]).hasClass(color_list)){
33
+ if($(fluits_list[i]).hasClass(color[colori])){
34
+ hasCount++;
35
+ }
36
+ }
37
+ if(hasCount==color.length){ //チェックされたもの全て持っていれば黒に
38
+ //if(hasCount>0){ //チェックされたもの1つでも持っていれば黒に
35
39
  $(fluits_list[i]).css('color', '#000');
36
40
  }else{
37
- $(fluits_list[i]).css('color', '#ddd');
41
+ $(fluits_list[i]).css('color', '#ddd');
38
-
39
42
  }
40
43
  }
41
44
  }

2

誤字修正

2018/04/05 10:17

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -1,4 +1,4 @@
1
- もっと完結にかけるかもしれませんが。
1
+ もっと簡潔にかけるかもしれませんが。
2
2
  ```html
3
3
  <div class="fluits">
4
4
  <p class="red green yellow">リンゴ(red)(green)(yellow)</p>

1

追記

2018/04/05 08:38

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -8,6 +8,7 @@
8
8
  ```
9
9
 
10
10
  それぞれにクラスを振っておき、そのクラスを含むかどうかで判断します。
11
+ これなら項目が増えてもclass振るだけなのでjavascript側は変えずにhtmlの方だけ増やせばOKとなるはず。
11
12
 
12
13
  ```javascript
13
14
  (function($){