回答編集履歴
4
コメントで指摘を受けた点について修正
test
CHANGED
|
@@ -36,23 +36,17 @@
|
|
|
36
36
|
|
|
37
37
|
<script>
|
|
38
38
|
|
|
39
|
-
f
|
|
39
|
+
for (let i = 0; i < 10; i++) {
|
|
40
|
+
|
|
41
|
+
$('.box:last').after('<div class="box"></div>');
|
|
42
|
+
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
$('.box').click(function () {
|
|
40
46
|
|
|
41
47
|
$(this).toggleClass('circle');
|
|
42
48
|
|
|
43
|
-
}
|
|
49
|
+
});
|
|
44
|
-
|
|
45
|
-
for (let i = 0; i < 10; i++) {
|
|
46
|
-
|
|
47
|
-
$('.box:last')
|
|
48
|
-
|
|
49
|
-
.after('<div class="box"></div>')
|
|
50
|
-
|
|
51
|
-
.click(clickListener);
|
|
52
|
-
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
$('.box:last').click(clickListener);
|
|
56
50
|
|
|
57
51
|
</script>
|
|
58
52
|
|
|
@@ -64,8 +58,4 @@
|
|
|
64
58
|
|
|
65
59
|
|
|
66
60
|
|
|
67
|
-
この例では要素の方にイベントリスナを付けていますが、こだわりがなければwindowやdocumentにくっつけた方がぶっちゃけタイプ数は減ります。が、色々と意図しない不具合の原因になることが多々あるのでおすすめはしないです。(JQueryの入門とかみるとdocumentとかにつけてる方が多いかもですけれど……。)
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
61
|
また、セレクタに:lastをつけたのは1ループにつき要素を1つ増やすためです。倍々に増えていくのが正しい動作ならば消してください。
|
3
解説を追記
test
CHANGED
|
@@ -60,7 +60,11 @@
|
|
|
60
60
|
|
|
61
61
|
|
|
62
62
|
|
|
63
|
-
このように修正すればよいはずです。JQueryのappend関数は、選択した要素の末尾(要素の内側であることに注意)に要素を追加します。今回の場合は要素の後に追加したいので、after関数が適切です。
|
|
63
|
+
このように修正すればよいはずです。JQueryのappend関数は、選択した要素の末尾(要素の内側であることに注意)に要素を追加します。今回の場合は要素の後に追加したいので、after関数が適切です。
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
この例では要素の方にイベントリスナを付けていますが、こだわりがなければwindowやdocumentにくっつけた方がぶっちゃけタイプ数は減ります。が、色々と意図しない不具合の原因になることが多々あるのでおすすめはしないです。(JQueryの入門とかみるとdocumentとかにつけてる方が多いかもですけれど……。)
|
|
64
68
|
|
|
65
69
|
|
|
66
70
|
|
2
コードの修正
test
CHANGED
|
@@ -36,19 +36,23 @@
|
|
|
36
36
|
|
|
37
37
|
<script>
|
|
38
38
|
|
|
39
|
+
function clickListener () {
|
|
40
|
+
|
|
41
|
+
$(this).toggleClass('circle');
|
|
42
|
+
|
|
43
|
+
}
|
|
44
|
+
|
|
39
45
|
for (let i = 0; i < 10; i++) {
|
|
40
46
|
|
|
41
47
|
$('.box:last')
|
|
42
48
|
|
|
43
49
|
.after('<div class="box"></div>')
|
|
44
50
|
|
|
45
|
-
.click(
|
|
51
|
+
.click(clickListener);
|
|
46
|
-
|
|
47
|
-
$(this).toggleClass('circle');
|
|
48
|
-
|
|
49
|
-
});
|
|
50
52
|
|
|
51
53
|
}
|
|
54
|
+
|
|
55
|
+
$('.box:last').click(clickListener);
|
|
52
56
|
|
|
53
57
|
</script>
|
|
54
58
|
|
|
@@ -56,9 +60,7 @@
|
|
|
56
60
|
|
|
57
61
|
|
|
58
62
|
|
|
59
|
-
このように修正すればよいはずです。JQueryのappend関数は、選択した要素の末尾(要素の内側であることに注意)に要素を追加します。
|
|
63
|
+
このように修正すればよいはずです。JQueryのappend関数は、選択した要素の末尾(要素の内側であることに注意)に要素を追加します。今回の場合は要素の後に追加したいので、after関数が適切です。そして、after関数の戻り値は
|
|
60
|
-
|
|
61
|
-
今回の場合は要素の後に追加したいので、after関数が適切です。
|
|
62
64
|
|
|
63
65
|
|
|
64
66
|
|
1
コードのミスを修正
test
CHANGED
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
|
|
45
45
|
.click(function () {
|
|
46
46
|
|
|
47
|
-
this.toggleClass('circle');
|
|
47
|
+
$(this).toggleClass('circle');
|
|
48
48
|
|
|
49
49
|
});
|
|
50
50
|
|