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

回答編集履歴

3

追記

2020/09/12 22:34

投稿

AkitoshiManabe
AkitoshiManabe

スコア5434

answer CHANGED
@@ -29,6 +29,7 @@
29
29
  "https://teratail.com/"
30
30
  ];
31
31
 
32
+ // スプレッド構文 + forEach() の例
32
33
  [...document.querySelectorAll("figure.slide img[alt]")].forEach( (elm, idx) => {
33
34
  // elm == <img>, elm.parentNode == <figure>
34
35
  elm.parentNode.addEventListener("click", ()=>{
@@ -42,6 +43,25 @@
42
43
  })
43
44
 
44
45
  });
46
+ /*
47
+ // for 文での例
48
+ let figs = document.querySelectorAll("figure.slide img[alt]");
49
+ for ( let idx = 0; idx<figs.length; ++idx ) {
50
+ let elm = figs[idx];
51
+ // elm == <img>, elm.parentNode == <figure>
52
+ elm.parentNode.addEventListener("click", function(){
53
+
54
+ // <a> を文書に配備せずに動的クリックする荒業(悪い例かもしれません)
55
+ let a = document.createElement("a");
56
+ a.href = links[idx];
57
+ a.target = "_blank";
58
+ a..click();
59
+
60
+ })
61
+
62
+ };
63
+ */
64
+
45
65
  ```
46
66
  alt 属性が正しく入力されている3枚のスライドについて、リンクを開きます。
47
67
 

2

追記

2020/09/12 22:34

投稿

AkitoshiManabe
AkitoshiManabe

スコア5434

answer CHANGED
@@ -47,4 +47,7 @@
47
47
 
48
48
  > JavaScript初心者
49
49
 
50
- 短いコードですので、利用している内容をMDNで調べて何をやっているか読み解いてください。
50
+ 短いコードですので、利用している内容を MDN で調べて何をやっているか読み解いてください。
51
+
52
+ 追記)
53
+ JavaScriptが初めての場合、MDNの [JavaScript](https://developer.mozilla.org/ja/docs/Web/JavaScript) というページが書籍の目次に相当すると思います。

1

訂正

2020/09/12 04:36

投稿

AkitoshiManabe
AkitoshiManabe

スコア5434

answer CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  1) 開発者コンソールの Elements タブで確認してみてください
9
9
 
10
- スライド1つ分の該当する文書断片は以下のようになります
10
+ スライド1つ分に相当する文書断片は以下のようになります
11
11
  ```html
12
12
  <figure class="slide">
13
13
  <img src="https://examples.com/path/to/image.jpeg" alt="Rain">
@@ -30,12 +30,15 @@
30
30
  ];
31
31
 
32
32
  [...document.querySelectorAll("figure.slide img[alt]")].forEach( (elm, idx) => {
33
+ // elm == <img>, elm.parentNode == <figure>
34
+ elm.parentNode.addEventListener("click", ()=>{
33
35
 
34
- elm.parentNode.addEventListener("click", ()=>{
36
+ // <a> を文書に配備せずに動的クリックする荒業(悪い例かもしれません)
35
37
  Object.assign( document.createElement("a"), {
36
38
  href:links[idx],
37
- target:"_blanc"
39
+ target:"_blank"
38
40
  }).click();
41
+
39
42
  })
40
43
 
41
44
  });