teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問jQueryについて反応するタグ反応しないタグの質問です

編集履歴

質問編集履歴

6

css追加

2018/10/16 07:25

投稿

mijinko889
mijinko889

スコア33

test CHANGED
File without changes
test CHANGED
@@ -142,6 +142,146 @@
142
142
 
143
143
  ```
144
144
 
145
+ 新しく要因となりそうな部分を指摘いただいたのでcssファイルを追記しました。
146
+
147
+ コンソール開いて構造など確認はしているのですが酷く被さっている部分はないように思います…
148
+
149
+ ```css
150
+
151
+ body{
152
+
153
+ margin: 0;
154
+
155
+ padding: 0;
156
+
157
+ }
158
+
159
+
160
+
161
+ .content{
162
+
163
+ border: 1px solid black;
164
+
165
+ }
166
+
167
+
168
+
169
+
170
+
171
+ #maincanvas{
172
+
173
+ width: auto;
174
+
175
+ height:67vh;/*370px;*/
176
+
177
+ }
178
+
179
+
180
+
181
+ .canvas{
182
+
183
+ position: absolute;
184
+
185
+ top: 0;left: 0;
186
+
187
+ }
188
+
189
+
190
+
191
+ .mapimgtest{
192
+
193
+ position: relative;
194
+
195
+ top: 0;left: 0;
196
+
197
+ }
198
+
199
+
200
+
201
+ .optionbutton{
202
+
203
+ margin: 0;
204
+
205
+ padding: 0;
206
+
207
+ width: 100px;
208
+
209
+ height: auto;
210
+
211
+ position: absolute;
212
+
213
+ top: 0;right: 0;
214
+
215
+ }
216
+
217
+ //////////////////////////////////////////////////////////////////////////////
218
+
219
+ #inputmenu{
220
+
221
+ width: auto;
222
+
223
+ height: 22vh;/*134px;*/
224
+
225
+ }
226
+
227
+
228
+
229
+ .iconimg{
230
+
231
+ display:-webkit-flex;
232
+
233
+ display: flex;
234
+
235
+ -webkit-justify-content: space-around;
236
+
237
+ justify-content: space-around;
238
+
239
+ padding:0;
240
+
241
+ width: auto;
242
+
243
+ }
244
+
245
+ ///////////////////////////////////////////////////////////////////
246
+
247
+ #partreader{
248
+
249
+ width: auto;
250
+
251
+ height: 11vh;/*50px;*/
252
+
253
+ }
254
+
255
+
256
+
257
+ .lern{
258
+
259
+ position: relative;
260
+
261
+ top: 0;left: 0;
262
+
263
+ background-color: red;
264
+
265
+ width: auto;
266
+
267
+ height: 50px;
268
+
269
+ }
270
+
271
+ #readerimg{
272
+
273
+ position: relative;
274
+
275
+ left: 0;top:0;
276
+
277
+ max-height: 50px;
278
+
279
+ }
280
+
281
+
282
+
283
+ ```
284
+
145
285
  ### 試したこと
146
286
 
147
287
 

5

追記

2018/10/16 07:25

投稿

mijinko889
mijinko889

スコア33

test CHANGED
File without changes
test CHANGED
@@ -159,3 +159,7 @@
159
159
  （追記）こちらに張り付けたものをコピペで戻して使っても結果は変わらずです.また、動いている処理をコピーして数値の部分だけ1に書き換えても1番目の.membericon1には反応無しでした.
160
160
 
161
161
  試しに.membericon1の要素を消すと、次は.membericon2の要素に反応がなくなりました
162
+
163
+
164
+
165
+ 回答していただいたものを参考にソースコードを書き直しています

4

ソースコードを直しました

2018/10/16 00:43

投稿

mijinko889
mijinko889

スコア33

test CHANGED
File without changes
test CHANGED
@@ -76,69 +76,69 @@
76
76
 
77
77
  ```js
78
78
 
79
- var
79
+ var
80
80
 
81
- maincanvas = document.getElementById("maincanvas"),
81
+ maincanvas = document.getElementById("maincanvas"),
82
82
 
83
- mapground = document.getElementById("mapimgground"),
83
+ mapground = document.getElementById("mapimgground"),
84
84
 
85
- reader = document.getElementById("partreader"),
85
+ reader = document.getElementById("partreader"),
86
86
 
87
- inputarea = document.getElementById("inputmenu"),
87
+ inputarea = document.getElementById("inputmenu"),
88
88
 
89
89
 
90
90
 
91
- canvas_w=maincanvas.clientWidth,canvas_h=maincanvas.clientHeight,
91
+ canvas_w=maincanvas.clientWidth,canvas_h=maincanvas.clientHeight,
92
92
 
93
- lern_w=reader.clientWidth,lern_h=reader.clientWidth,
93
+ lern_w=reader.clientWidth,lern_h=reader.clientWidth,
94
94
 
95
- input_w=inputarea.clientWidth,input_h=inputarea.clientWidth;
95
+ input_w=inputarea.clientWidth,input_h=inputarea.clientWidth;
96
96
 
97
97
 
98
98
 
99
- function main() {
99
+ function main() {
100
100
 
101
- mapground.innerHTML+="<img class='mapimg' id='mapimg' src='img/mapimgtest.jpg' width="+canvas_w+" height="+canvas_h+">";
101
+ mapground.innerHTML+="<img class='mapimg' id='mapimg' src='img/mapimgtest.jpg' width="+canvas_w+" height="+canvas_h+">";
102
102
 
103
- };
103
+ };
104
104
 
105
105
 
106
106
 
107
- $(function(){//ここが反応してくれません
107
+ //回答を参考に変更しました
108
108
 
109
- $('.membericon1').on('click',function(){
109
+ $(function(){//やはり動きません
110
110
 
111
- console.log("きりかえ");
111
+ $('.membericon1').on('click',function(){
112
112
 
113
- });
113
+ console.log("きりかえ1");
114
114
 
115
- });
115
+ });
116
116
 
117
- //ここから先は普通に反応します
117
+ ///////////ここからは動きます///////////////////////////////////////////
118
118
 
119
- $(function(){
119
+ $('.membericon2').bind('touchstart',function(){
120
120
 
121
- $('.membericon2').on('click',function(){
121
+ $('#member2').attr('src',"img/face1.jpg");
122
122
 
123
- $('#member2').attr('src',"img/face1.jpg");
123
+ });
124
124
 
125
- });
125
+ $('.membericon3').bind('touchstart',function(){
126
126
 
127
+ console.log("きりかえ3");
128
+
127
- });
129
+ });
130
+
131
+ $('.membericon4').bind('touchstart',function(){
132
+
133
+ console.log("きりかえ4");
134
+
135
+ });
136
+
137
+ });
128
138
 
129
139
 
130
140
 
131
- $(function(){
132
-
133
- $('.membericon3').on('click',function(){
134
-
135
- console.log("きりかえ");
136
-
137
- });
138
-
139
- });
140
-
141
- main();
141
+ main();
142
142
 
143
143
  ```
144
144
 

3

追記

2018/10/16 00:42

投稿

mijinko889
mijinko889

スコア33

test CHANGED
File without changes
test CHANGED
@@ -157,3 +157,5 @@
157
157
  2番目以降のimg要素には何の問題もなく処理が反映されたので書き方に間違いがあるのではないとと思っています.また、何度かキャッシュを削除してリロードしたりしましたが変わりませんでした….
158
158
 
159
159
  （追記）こちらに張り付けたものをコピペで戻して使っても結果は変わらずです.また、動いている処理をコピーして数値の部分だけ1に書き換えても1番目の.membericon1には反応無しでした.
160
+
161
+ 試しに.membericon1の要素を消すと、次は.membericon2の要素に反応がなくなりました

2

追記

2018/10/16 00:06

投稿

mijinko889
mijinko889

スコア33

test CHANGED
File without changes
test CHANGED
@@ -155,3 +155,5 @@
155
155
  ためしたブラウザはGooglechromeです。
156
156
 
157
157
  2番目以降のimg要素には何の問題もなく処理が反映されたので書き方に間違いがあるのではないとと思っています.また、何度かキャッシュを削除してリロードしたりしましたが変わりませんでした….
158
+
159
+ （追記）こちらに張り付けたものをコピペで戻して使っても結果は変わらずです.また、動いている処理をコピーして数値の部分だけ1に書き換えても1番目の.membericon1には反応無しでした.

1

（追記）ここに張り付けたものをまたコピペして確認しましたが結果は変わらずです

2018/10/16 00:03

投稿

mijinko889
mijinko889

スコア33

test CHANGED
File without changes
test CHANGED
File without changes