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

回答編集履歴

3

修正

2020/05/25 03:04

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -30,4 +30,9 @@
30
30
  HTMLでいうと以下のような形でないといけません。
31
31
  ```HTML
32
32
  <text class="value"></text>
33
- ```
33
+ ```
34
+
35
+ ---
36
+ `:contains()`が、inputなど閉じタグがない要素でも使用可能か、jQueryの仕様を調べたほうがよさそうです。
37
+ (現状、こちらの手元で`<textarea>りんご</textarea>`では実装できましたが、
38
+ `<input type="text" value="りんご">`では実装できませんでした。)

2

コメントを追記

2020/05/25 03:04

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -2,18 +2,22 @@
2
2
 
3
3
  ```jQuery
4
4
  $(function() {
5
+ // 初期値、「<input type="text" value="りんご">」の場合
5
6
  setColor();
6
7
 
8
+ // 「<input type="text">」を変更したときに実行
7
9
  $('input[type="text"]').on('change', function() {
8
10
  setColor();
9
11
  });
10
12
  }
11
13
 
12
14
  function setColor() {
13
- if ($('input[type="text"]').val() === 'りんご') {
15
+ if ($('input[type="text"]').val().indexOf('りんご') !== -1) {
16
+ // 「りんご」が含まれる場合
14
17
  $('input[type="text"]').css('color', '#eea019');
15
18
  }
16
19
  else {
20
+ // 「りんご」が含まれない場合
17
21
  $('input[type="text"]').removeAttr('style');
18
22
  }
19
23
  }

1

修正

2020/05/25 02:57

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -17,4 +17,13 @@
17
17
  $('input[type="text"]').removeAttr('style');
18
18
  }
19
19
  }
20
+ ```
21
+
22
+ ---
23
+ `$("text.value:contains('りんご')").css("color","#eea019");`
24
+
25
+ `text.value`の部分については、<text>タグのクラス名が「value」の要素、という意味になり
26
+ HTMLでいうと以下のような形でないといけません。
27
+ ```HTML
28
+ <text class="value"></text>
20
29
  ```