質問編集履歴
1
質問の具体化
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -6,7 +6,25 @@
|
|
|
6
6
|
|
|
7
7
|
# やりたいこと
|
|
8
8
|
|
|
9
|
-
HTML中のリスト要素に対して、JavaScriptで定義した動作を実行したいと考えています。
|
|
9
|
+
HTML中のリスト要素に対して、JavaScriptで定義した動作を実行したいと考えています。
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
イメージ的に近いのは、Twitterで、各ツイートには右上に下向きの矢印がついていて（下図の赤丸内）それをクリックすると、そのツイートをコピーしたりブロックするためのメニューが並ぶと思いますが、このように、リストをクリックすると**その**リストに対して処理を行いたいと思っています。
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
このとき重要だと思っているのが、Twitterの例を使って説明すると、どのリストをクリックしても出てくるメニュー(コピーやブロック、ミュート)は同じになってほしいが、ブロックをクリックしたときには、そのリストのみに対して処理を実行したいということです。
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
# どこまでできていて何がわからないか
|
|
22
|
+
|
|
23
|
+
いくつか頂いた回答を参考に、以下のところまでは理解できています。
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
例えば、
|
|
10
28
|
|
|
11
29
|
|
|
12
30
|
|
|
@@ -14,35 +32,45 @@
|
|
|
14
32
|
|
|
15
33
|
<ul>
|
|
16
34
|
|
|
17
|
-
<li class="test1"><span>abc</span></li>
|
|
35
|
+
<li class="test" id="test1"><span>abc</span></li>
|
|
18
36
|
|
|
19
|
-
<li class="test2"><span>def</span></li>
|
|
37
|
+
<li class="test" id="test2"><span>def</span></li>
|
|
20
38
|
|
|
21
|
-
<li class="test3"><span>ghi</span></li>
|
|
39
|
+
<li class="test" id="test3"><span>ghi</span></li>
|
|
22
40
|
|
|
23
41
|
</ul>
|
|
24
42
|
|
|
25
43
|
```
|
|
26
44
|
|
|
27
|
-
というリスト
|
|
45
|
+
というリストを考えて、
|
|
28
|
-
|
|
29
|
-
|
|
30
46
|
|
|
31
47
|
```javascript
|
|
32
48
|
|
|
33
49
|
(function(){
|
|
34
50
|
|
|
51
|
+
// とりあえずclass名がtestのものを全部取り出す
|
|
52
|
+
|
|
35
|
-
var element = document.getElementByClassName("test
|
|
53
|
+
var element = document.getElementByClassName("test");
|
|
36
54
|
|
|
37
55
|
|
|
38
56
|
|
|
57
|
+
for (var i = 0; i < element.length; i++){
|
|
58
|
+
|
|
39
|
-
/*
|
|
59
|
+
/* クリックされたリスト要素のidと一致するものを探索してメニューを出す */
|
|
60
|
+
|
|
61
|
+
}
|
|
40
62
|
|
|
41
63
|
})();
|
|
42
64
|
|
|
43
65
|
```
|
|
44
66
|
|
|
67
|
+
で動作を定義しました。
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
45
|
-
|
|
71
|
+
コードのコメントアウトしてある部分で、「クリックされたリスト要素のidと一致するものを探索」する部分をどう書いてよいのかがわかりません。
|
|
72
|
+
|
|
73
|
+
|
|
46
74
|
|
|
47
75
|
|
|
48
76
|
|