teratail
回答率
85.48%
質問するログイン新規登録
トップCSS3に関する質問jQueryでクラスを追加したのにクリックイベントが発生しない

編集履歴

回答編集履歴

7

少しコードを編集。何度もすみません。。(^ ^;

2017/10/04 15:15

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -84,7 +84,7 @@
84
84
 
85
85
  <meta charset="utf-8">
86
86
 
87
- <title>template</title>
87
+ <title>boxN</title>
88
88
 
89
89
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
90
90
 
@@ -288,6 +288,8 @@
288
288
 
289
289
  ```
290
290
 
291
+ [jsfiddle](https://jsfiddle.net/namnium1125/4mctxLbw/)
292
+
291
293
 
292
294
 
293
295
  これで互いに影響を及ぼすことは無いはずです。

6

少しコードwo編集

2017/10/04 15:15

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
File without changes

5

更に追記

2017/10/04 15:12

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -63,3 +63,231 @@
63
63
  [jsfiddle](https://jsfiddle.net/namnium1125/bxkmhy8m/)
64
64
 
65
65
  ※このデモでは`7`までくると`1`に戻るようになっています。
66
+
67
+
68
+
69
+ ## 追記2
70
+
71
+
72
+
73
+ 今までの話を踏まえて全体的に作り直してみました。
74
+
75
+
76
+
77
+ ```javascript
78
+
79
+ <!doctype html>
80
+
81
+ <html>
82
+
83
+ <head>
84
+
85
+ <meta charset="utf-8">
86
+
87
+ <title>template</title>
88
+
89
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
90
+
91
+ <style>
92
+
93
+ .bx {
94
+
95
+ width: 100px;
96
+
97
+ height: 100px;
98
+
99
+ margin: 10px;
100
+
101
+ }
102
+
103
+
104
+
105
+ .wrapper{
106
+
107
+ display: -webkit-box;
108
+
109
+ display: -moz-box;
110
+
111
+ }
112
+
113
+
114
+
115
+ .box1{
116
+
117
+ background: red;
118
+
119
+ }
120
+
121
+
122
+
123
+ .box2{
124
+
125
+ background: orange;
126
+
127
+ }
128
+
129
+
130
+
131
+ .box3{
132
+
133
+ background: yellow;
134
+
135
+ }
136
+
137
+
138
+
139
+ .box4{
140
+
141
+ background: green;
142
+
143
+ }
144
+
145
+
146
+
147
+ .box5{
148
+
149
+ background: aqua;
150
+
151
+ }
152
+
153
+
154
+
155
+ .box6{
156
+
157
+ background: blue;
158
+
159
+ }
160
+
161
+
162
+
163
+ .box7{
164
+
165
+ background: purple;
166
+
167
+ }
168
+
169
+ </style>
170
+
171
+ <script>
172
+
173
+ $(function(){
174
+
175
+ // 初期化 全ての.bxにイベント付与
176
+
177
+ // click.chn -> changeBoxNumに関するclickイベントであることを明記 意味は無いかも。。(^ ^;
178
+
179
+ $('.bx').one('click.chn',function(e){
180
+
181
+ var clsNames = $(e.target).attr('class').split(' ');
182
+
183
+ var n = 1;
184
+
185
+ clsNames.forEach(function(val,ind,arr){
186
+
187
+ if(val.indexOf('box') != -1) n = parseInt(val.split('box')[1]);
188
+
189
+ });
190
+
191
+ changeBoxNum(n,e.target);
192
+
193
+ });
194
+
195
+ });
196
+
197
+
198
+
199
+ function changeBoxNum(n,et){
200
+
201
+ if(n<7){
202
+
203
+ $(et).removeClass('box'+n).addClass('box'+(n+1));
204
+
205
+ $(et).one('click.chn',function(e){
206
+
207
+ changeBoxNum(n+1,e.target);
208
+
209
+ });
210
+
211
+ }else{
212
+
213
+ $(et).removeClass('box7').addClass('box1');
214
+
215
+ $(et).one('click.chn',function(e){
216
+
217
+ changeBoxNum(1,e.target);
218
+
219
+ });
220
+
221
+ }
222
+
223
+ }
224
+
225
+ </script>
226
+
227
+ </head>
228
+
229
+ <body>
230
+
231
+ <div class="wrapper">
232
+
233
+ <div class="bx box1"></div>
234
+
235
+ <div class="bx box2"></div>
236
+
237
+ <div class="bx box3"></div>
238
+
239
+ <div class="bx box4"></div>
240
+
241
+ <div class="bx box5"></div>
242
+
243
+ <div class="bx box6"></div>
244
+
245
+ <div class="bx box7"></div>
246
+
247
+ </div>
248
+
249
+ <div class="wrapper">
250
+
251
+ <div class="bx box1"></div>
252
+
253
+ <div class="bx box2"></div>
254
+
255
+ <div class="bx box3"></div>
256
+
257
+ <div class="bx box4"></div>
258
+
259
+ <div class="bx box5"></div>
260
+
261
+ <div class="bx box6"></div>
262
+
263
+ <div class="bx box7"></div>
264
+
265
+ </div>
266
+
267
+ <div class="wrapper">
268
+
269
+ <div class="bx box1"></div>
270
+
271
+ <div class="bx box2"></div>
272
+
273
+ <div class="bx box3"></div>
274
+
275
+ <div class="bx box4"></div>
276
+
277
+ <div class="bx box5"></div>
278
+
279
+ <div class="bx box6"></div>
280
+
281
+ <div class="bx box7"></div>
282
+
283
+ </div>
284
+
285
+ </body>
286
+
287
+ </html>
288
+
289
+ ```
290
+
291
+
292
+
293
+ これで互いに影響を及ぼすことは無いはずです。

4

コードの訂正

2017/10/04 14:57

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -42,6 +42,8 @@
42
42
 
43
43
  function changeBoxNum(n){
44
44
 
45
+ $('.box'+n).off("click");
46
+
45
47
  $('.box'+n).removeClass().addClass('box'+(n+1));
46
48
 
47
49
  $('.box'+(n+1)).click(function(){

3

デモの追加

2017/10/04 13:52

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -55,3 +55,9 @@
55
55
  ```
56
56
 
57
57
  これで無制限に変更できます。
58
+
59
+
60
+
61
+ [jsfiddle](https://jsfiddle.net/namnium1125/bxkmhy8m/)
62
+
63
+ ※このデモでは`7`までくると`1`に戻るようになっています。

2

追記しました

2017/10/04 13:40

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -21,3 +21,37 @@
21
21
  これでとりあえず
22
22
 
23
23
  `.box1`->`.box2`->`.box3`となります。
24
+
25
+
26
+
27
+ ## 追記
28
+
29
+ ```javascript
30
+
31
+ $(function(){
32
+
33
+ $('.box1').click(function(){
34
+
35
+ changeBoxNum(1);
36
+
37
+ });
38
+
39
+ });
40
+
41
+
42
+
43
+ function changeBoxNum(n){
44
+
45
+ $('.box'+n).removeClass().addClass('box'+(n+1));
46
+
47
+ $('.box'+(n+1)).click(function(){
48
+
49
+ changeBoxNum(n+1);
50
+
51
+ });
52
+
53
+ }
54
+
55
+ ```
56
+
57
+ これで無制限に変更できます。

1

コードの編集

2017/10/04 13:32

投稿

namnium1125
namnium1125

スコア2043

test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  $('.box2').removeClass().addClass('box3');
12
12
 
13
- })
13
+ });
14
14
 
15
15
  });
16
16