回答編集履歴

2

テキスト追加

2020/04/19 08:14

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
 
38
38
 
39
- const handleCommandClick = function({ target }) {
39
+ const handleContainerClick = function({ target }) {
40
40
 
41
41
  if (target.classList.contains("command")) {
42
42
 
@@ -68,7 +68,7 @@
68
68
 
69
69
  document.querySelector('.command-container-right')
70
70
 
71
- .addEventListener('click', handleCommandClick, false);
71
+ .addEventListener('click', handleContainerClick, false);
72
72
 
73
73
  ```
74
74
 

1

テキスト追加

2020/04/19 08:14

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -3,6 +3,28 @@
3
3
 
4
4
 
5
5
  ご質問の主旨としては、似たようなコードを4回書くのを避けたい、ということかなと思われましたので、一例を回答します。
6
+
7
+
8
+
9
+
10
+
11
+ 要件を満たすための最小限の属性だけを持つように、HTMLを以下のように修正します。
12
+
13
+ ```html
14
+
15
+ <div class="command-container-right">
16
+
17
+ <p class="command" data-text="攻撃">こうげき</p>
18
+
19
+ <p class="command" data-text="魔法">まほう</p>
20
+
21
+ <p class="command" data-text="道具">どうぐ</p>
22
+
23
+ <p class="command" data-text="逃げる">にげる</p>
24
+
25
+ </div>
26
+
27
+ ```
6
28
 
7
29
 
8
30
 
@@ -18,9 +40,11 @@
18
40
 
19
41
  if (target.classList.contains("command")) {
20
42
 
43
+ console.log(`${target.dataset.text}!`);
44
+
21
45
  commands.forEach(cmd => {
22
46
 
23
- if (cmd.dataset.indexId !== target.dataset.indexId)
47
+ if (cmd.textContent !== target.textContent)
24
48
 
25
49
  cmd.style.pointerEvents = "none";
26
50
 
@@ -29,6 +53,8 @@
29
53
  }
30
54
 
31
55
  };
56
+
57
+
32
58
 
33
59
  ```
34
60
 
@@ -48,12 +74,12 @@
48
74
 
49
75
 
50
76
 
51
- 以下は、上記のコードの動作確認用のサンプルです。確認のための alert を追加しています。
77
+ 以下は、上記のコードの動作確認用のサンプルです。
52
78
 
53
79
 
54
80
 
55
- - **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/YzyWjwj](https://codepen.io/jun68ykt/pen/YzyWjwj)
81
+ - **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/eYpzjeR?editors=1011](https://codepen.io/jun68ykt/pen/eYpzjeR?editors=1011)
56
82
 
57
83
 
58
84
 
59
- たとえば、最初に「どうぐ」をクリックすると、それ以後、「どうぐ」以外をクリックしてもクリックイベントが発生しくなること確認できます。
85
+ たとえば、最初に「どうぐ」をクリックすると、console.log に `道具!` と出力され、それ以後、「どうぐ」以外をクリックしても、console.log に何も出力されこと確認できると思います。