回答編集履歴

コメントで指摘を受けた点について修正

2019/08/30 17:03

投稿

スコア322

answer CHANGED Viewed

@@ -17,20 +17,15 @@
 }
 <script>
-  function clickListener () {
-    $(this).toggleClass('circle');
-  }
   for (let i = 0; i < 10; i++) {
-    $('.box:last')
-      .after('<div class="box"></div>')
+    $('.box:last').after('<div class="box"></div>');
-      .click(clickListener);
   }
-  $('.box:last').click(clickListener);
+  $('.box').click(function () {
+    $(this).toggleClass('circle');
+  });
 </script>
 ```
 このように修正すればよいはずです。JQueryのappend関数は、選択した要素の末尾(要素の内側であることに注意)に要素を追加します。今回の場合は要素の後に追加したいので、after関数が適切です。
-この例では要素の方にイベントリスナを付けていますが、こだわりがなければwindowやdocumentにくっつけた方がぶっちゃけタイプ数は減ります。が、色々と意図しない不具合の原因になることが多々あるのでおすすめはしないです。(JQueryの入門とかみるとdocumentとかにつけてる方が多いかもですけれど……。)
 また、セレクタに:lastをつけたのは1ループにつき要素を1つ増やすためです。倍々に増えていくのが正しい動作ならば消してください。

解説を追記

2019/08/30 17:03

投稿

スコア322

answer CHANGED Viewed

@@ -29,6 +29,8 @@
 </script>
 ```
-このように修正すればよいはずです。JQueryのappend関数は、選択した要素の末尾(要素の内側であることに注意)に要素を追加します。今回の場合は要素の後に追加したいので、after関数が適切です。そして、after関数の戻り値は
+このように修正すればよいはずです。JQueryのappend関数は、選択した要素の末尾(要素の内側であることに注意)に要素を追加します。今回の場合は要素の後に追加したいので、after関数が適切です。
+この例では要素の方にイベントリスナを付けていますが、こだわりがなければwindowやdocumentにくっつけた方がぶっちゃけタイプ数は減ります。が、色々と意図しない不具合の原因になることが多々あるのでおすすめはしないです。(JQueryの入門とかみるとdocumentとかにつけてる方が多いかもですけれど……。)
 また、セレクタに:lastをつけたのは1ループにつき要素を1つ増やすためです。倍々に増えていくのが正しい動作ならば消してください。

コードの修正

2019/08/30 16:48

投稿

スコア322

answer CHANGED Viewed

@@ -17,17 +17,18 @@
 }
 <script>
+  function clickListener () {
+    $(this).toggleClass('circle');
+  }
   for (let i = 0; i < 10; i++) {
     $('.box:last')
       .after('<div class="box"></div>')
-      .click(function () {
+      .click(clickListener);
-        $(this).toggleClass('circle');
-      });
   }
+  $('.box:last').click(clickListener);
 </script>
 ```
-このように修正すればよいはずです。JQueryのappend関数は、選択した要素の末尾(要素の内側であることに注意)に要素を追加します。
+このように修正すればよいはずです。JQueryのappend関数は、選択した要素の末尾(要素の内側であることに注意)に要素を追加します。今回の場合は要素の後に追加したいので、after関数が適切です。そして、after関数の戻り値は
-今回の場合は要素の後に追加したいので、after関数が適切です。
 また、セレクタに:lastをつけたのは1ループにつき要素を1つ増やすためです。倍々に増えていくのが正しい動作ならば消してください。

コードのミスを修正

2019/08/30 16:44

投稿

スコア322

answer CHANGED Viewed

@@ -21,7 +21,7 @@
     $('.box:last')
       .after('<div class="box"></div>')
       .click(function () {
-        this.toggleClass('circle');
+        $(this).toggleClass('circle');
       });
   }
 </script>