回答編集履歴
2
注意書き加筆
test
CHANGED
|
@@ -99,3 +99,31 @@
|
|
|
99
99
|
</html>
|
|
100
100
|
|
|
101
101
|
```
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
ただ、新しく追加する要素をイベントターゲットにするときには注意が必要です。
|
|
106
|
+
|
|
107
|
+
```JavaScipt
|
|
108
|
+
|
|
109
|
+
$('.newClass').on('click', function() {
|
|
110
|
+
|
|
111
|
+
alert($(this).text());
|
|
112
|
+
|
|
113
|
+
});
|
|
114
|
+
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
では動作せず、
|
|
118
|
+
|
|
119
|
+
```JavaScipt
|
|
120
|
+
|
|
121
|
+
$(document).on('click', '.newClass', function() {
|
|
122
|
+
|
|
123
|
+
alert($(this).text());
|
|
124
|
+
|
|
125
|
+
});
|
|
126
|
+
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
と書きましょう。
|
1
コメントに対して追記
test
CHANGED
|
@@ -1,4 +1,12 @@
|
|
|
1
1
|
cssを持ったクラスを用意しておき、要素を追加するときにclass属性にそのクラス名を指定すればいいです。
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
> どのようなcssにするか決まっていない場合はどうすれば良いのでしょうか？例えば、ユーザーがカラーピッカーなどで色を設定するときなどです。
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
そのクラス名に対して操作を行えばいいです。
|
|
2
10
|
|
|
3
11
|
```HTML
|
|
4
12
|
|
|
@@ -40,13 +48,33 @@
|
|
|
40
48
|
|
|
41
49
|
$('<div />', {
|
|
42
50
|
|
|
43
|
-
'class' : 'newClass'
|
|
51
|
+
'class' : 'newClass',
|
|
44
52
|
|
|
45
53
|
})
|
|
46
54
|
|
|
47
55
|
.text('abc')
|
|
48
56
|
|
|
57
|
+
.css('background-color', '#00ff00')
|
|
58
|
+
|
|
49
59
|
);
|
|
60
|
+
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
$('#reverseColor').on('click', function() {
|
|
66
|
+
|
|
67
|
+
$('.newClass').each(function() {
|
|
68
|
+
|
|
69
|
+
var color = $(this).css('color');
|
|
70
|
+
|
|
71
|
+
var backgroundColor = $(this).css('background-color');
|
|
72
|
+
|
|
73
|
+
$(this).css('color', backgroundColor);
|
|
74
|
+
|
|
75
|
+
$(this).css('background-color', color);
|
|
76
|
+
|
|
77
|
+
});
|
|
50
78
|
|
|
51
79
|
});
|
|
52
80
|
|
|
@@ -60,6 +88,8 @@
|
|
|
60
88
|
|
|
61
89
|
<input type="button" id="add" value="追加">
|
|
62
90
|
|
|
91
|
+
<input type="button" id="reverseColor" value="色反転">
|
|
92
|
+
|
|
63
93
|
<div id="container">
|
|
64
94
|
|
|
65
95
|
</div>
|