回答編集履歴

3

修正

2020/05/25 03:04

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -63,3 +63,13 @@
63
63
  <text class="value"></text>
64
64
 
65
65
  ```
66
+
67
+
68
+
69
+ ---
70
+
71
+ `:contains()`が、inputなど閉じタグがない要素でも使用可能か、jQueryの仕様を調べたほうがよさそうです。
72
+
73
+ (現状、こちらの手元で`<textarea>りんご</textarea>`では実装できましたが、
74
+
75
+ `<input type="text" value="りんご">`では実装できませんでした。)

2

コメントを追記

2020/05/25 03:04

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -6,9 +6,13 @@
6
6
 
7
7
  $(function() {
8
8
 
9
+ // 初期値、「<input type="text" value="りんご">」の場合
10
+
9
11
  setColor();
10
12
 
11
13
 
14
+
15
+ // 「<input type="text">」を変更したときに実行
12
16
 
13
17
  $('input[type="text"]').on('change', function() {
14
18
 
@@ -22,13 +26,17 @@
22
26
 
23
27
  function setColor() {
24
28
 
25
- if ($('input[type="text"]').val() === 'りんご') {
29
+ if ($('input[type="text"]').val().indexOf('りんご') !== -1) {
30
+
31
+ // 「りんご」が含まれる場合
26
32
 
27
33
  $('input[type="text"]').css('color', '#eea019');
28
34
 
29
35
  }
30
36
 
31
37
  else {
38
+
39
+ // 「りんご」が含まれない場合
32
40
 
33
41
  $('input[type="text"]').removeAttr('style');
34
42
 

1

修正

2020/05/25 02:57

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -37,3 +37,21 @@
37
37
  }
38
38
 
39
39
  ```
40
+
41
+
42
+
43
+ ---
44
+
45
+ `$("text.value:contains('りんご')").css("color","#eea019");`
46
+
47
+
48
+
49
+ `text.value`の部分については、<text>タグのクラス名が「value」の要素、という意味になり
50
+
51
+ HTMLでいうと以下のような形でないといけません。
52
+
53
+ ```HTML
54
+
55
+ <text class="value"></text>
56
+
57
+ ```