回答編集履歴
6
コード修正
answer
CHANGED
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
'use strict';
|
|
39
39
|
|
|
40
40
|
inputText.addEventListener('keyup', function () {
|
|
41
|
-
|
|
41
|
+
|
|
42
42
|
var s = inputText.value;
|
|
43
43
|
console.log(s);
|
|
44
44
|
|
5
参考サイト更新
answer
CHANGED
|
@@ -54,4 +54,4 @@
|
|
|
54
54
|
```
|
|
55
55
|
|
|
56
56
|
参考サイト
|
|
57
|
-
[
|
|
57
|
+
[Element.classList | MDN](https://developer.mozilla.org/ja/docs/Web/API/Element/classList)（条件によるクラスの追加または除去方法）
|
4
コード修正
answer
CHANGED
|
@@ -46,15 +46,7 @@
|
|
|
46
46
|
const p = wrapper.children;
|
|
47
47
|
|
|
48
48
|
for (var i = 0; i < p.length; i++) {
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
p[i].classList.toggle("hidden", p[i].textContent.indexOf(s) === -1 );
|
|
51
|
-
case true:
|
|
52
|
-
p[i].classList.remove('hidden');
|
|
53
|
-
break;
|
|
54
|
-
case false:
|
|
55
|
-
p[i].classList.add("hidden");
|
|
56
|
-
break;
|
|
57
|
-
}
|
|
58
50
|
}
|
|
59
51
|
}, false);
|
|
60
52
|
|
3
最新の質問に対する自己解決
answer
CHANGED
|
@@ -1,5 +1,65 @@
|
|
|
1
1
|
皆様、ご助言誠にありがとうございました。
|
|
2
2
|
以下のコードで実現できました。
|
|
3
|
+
（showクラスを外し忘れていただけでした）
|
|
4
|
+
皆様から教えていただいたやり方も、
|
|
5
|
+
少しずつ理解して行きたいと思います。
|
|
3
6
|
|
|
7
|
+
▼コード
|
|
8
|
+
[CodePen](https://codepen.io/0166/pen/pqdYXe?editors=1111)
|
|
9
|
+
|
|
10
|
+
```HTML
|
|
11
|
+
<div id="container">
|
|
12
|
+
|
|
13
|
+
<form id="form" action="#">
|
|
14
|
+
<input type="text" id="inputText" placeholder="文字を入力してください">
|
|
15
|
+
<input type="button" value="検索">
|
|
4
|
-
|
|
16
|
+
</form>
|
|
17
|
+
|
|
18
|
+
<div id="wrapper">
|
|
19
|
+
<p>りんご</p>
|
|
20
|
+
<p>りんごかな</p>
|
|
21
|
+
<p>みかん</p>
|
|
22
|
+
<p>みかん</p>
|
|
23
|
+
<p>りんご</p>
|
|
24
|
+
<p>りんご</p>
|
|
25
|
+
<p>パイナップル</p>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
</div>
|
|
29
|
+
```
|
|
30
|
+
```CSS
|
|
31
|
+
.hidden {
|
|
32
|
+
display: none;
|
|
33
|
+
}
|
|
34
|
+
```
|
|
5
|
-
|
|
35
|
+
```JavaScript
|
|
36
|
+
(function () {
|
|
37
|
+
|
|
38
|
+
'use strict';
|
|
39
|
+
|
|
40
|
+
inputText.addEventListener('keyup', function () {
|
|
41
|
+
// inputText.addEventListener('change', function () {
|
|
42
|
+
var s = inputText.value;
|
|
43
|
+
console.log(s);
|
|
44
|
+
|
|
45
|
+
const wrapper = document.getElementById('wrapper');
|
|
46
|
+
const p = wrapper.children;
|
|
47
|
+
|
|
48
|
+
for (var i = 0; i < p.length; i++) {
|
|
49
|
+
|
|
50
|
+
switch(p[i].textContent.indexOf(s) !== -1) {
|
|
51
|
+
case true:
|
|
52
|
+
p[i].classList.remove('hidden');
|
|
53
|
+
break;
|
|
54
|
+
case false:
|
|
55
|
+
p[i].classList.add("hidden");
|
|
56
|
+
break;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}, false);
|
|
60
|
+
|
|
61
|
+
})();
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
参考サイト
|
|
65
|
+
[ライブラリを使わない素のJavaScriptでDOM操作](https://qiita.com/kouh/items/dfc14d25ccb4e50afe89)（クラスの外し方）
|
2
回答撤回
answer
CHANGED
|
@@ -1,58 +1,5 @@
|
|
|
1
1
|
皆様、ご助言誠にありがとうございました。
|
|
2
2
|
以下のコードで実現できました。
|
|
3
3
|
|
|
4
|
-
[CodePen](https://codepen.io/0166/pen/pqdYXe)
|
|
5
|
-
|
|
6
|
-
```HTML
|
|
7
|
-
<div id="container">
|
|
8
|
-
|
|
9
|
-
<form id="form" action="#">
|
|
10
|
-
<input type="text" id="inputText" placeholder="文字を入力してください">
|
|
11
|
-
<input type="button" value="検索">
|
|
12
|
-
|
|
4
|
+
と、思いましたが出来ていませんでしたので、
|
|
13
|
-
|
|
14
|
-
<div id="wrapper">
|
|
15
|
-
<p>りんご</p>
|
|
16
|
-
<p>りんごかな</p>
|
|
17
|
-
<p>みかん</p>
|
|
18
|
-
<p>みかん</p>
|
|
19
|
-
<p>りんご</p>
|
|
20
|
-
<p>りんご</p>
|
|
21
|
-
<p>パイナップル</p>
|
|
22
|
-
</div>
|
|
23
|
-
|
|
24
|
-
</div>
|
|
25
|
-
```
|
|
26
|
-
```CSS
|
|
27
|
-
.hidden {
|
|
28
|
-
display: none;
|
|
29
|
-
}
|
|
30
|
-
```
|
|
31
|
-
|
|
5
|
+
質問を更新いたしました。
|
|
32
|
-
(function () {
|
|
33
|
-
|
|
34
|
-
'use strict';
|
|
35
|
-
|
|
36
|
-
inputText.addEventListener('keyup', function () {
|
|
37
|
-
var s = inputText.value;
|
|
38
|
-
console.log(s);
|
|
39
|
-
|
|
40
|
-
const wrapper = document.getElementById('wrapper');
|
|
41
|
-
const p = wrapper.children;
|
|
42
|
-
|
|
43
|
-
for (var i = 0; i < p.length; i++) {
|
|
44
|
-
p[i].dataset.value = p[i].textContent;
|
|
45
|
-
console.log(p[i].dataset.value);
|
|
46
|
-
|
|
47
|
-
if(p[i].dataset.value.indexOf(s) === -1) {
|
|
48
|
-
p[i].classList.add("hidden");
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
}, false);
|
|
53
|
-
|
|
54
|
-
})();
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
参考サイト
|
|
58
|
-
[javascriptで文字列内に任意の文字列が含まれているかをtrue/falseで返す](https://qiita.com/yuskamiya/items/14f0ffdd459419721a52)
|
1
コード修正
answer
CHANGED
|
@@ -42,9 +42,9 @@
|
|
|
42
42
|
|
|
43
43
|
for (var i = 0; i < p.length; i++) {
|
|
44
44
|
p[i].dataset.value = p[i].textContent;
|
|
45
|
-
console.log(p[i].dataset.value
|
|
45
|
+
console.log(p[i].dataset.value);
|
|
46
46
|
|
|
47
|
-
if
|
|
47
|
+
if(p[i].dataset.value.indexOf(s) === -1) {
|
|
48
48
|
p[i].classList.add("hidden");
|
|
49
49
|
}
|
|
50
50
|
|
|
@@ -55,4 +55,4 @@
|
|
|
55
55
|
```
|
|
56
56
|
|
|
57
57
|
参考サイト
|
|
58
|
-
[
|
|
58
|
+
[javascriptで文字列内に任意の文字列が含まれているかをtrue/falseで返す](https://qiita.com/yuskamiya/items/14f0ffdd459419721a52)
|