質問編集履歴
6
css追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -70,6 +70,76 @@
|
|
|
70
70
|
|
|
71
71
|
main();
|
|
72
72
|
```
|
|
73
|
+
新しく要因となりそうな部分を指摘いただいたのでcssファイルを追記しました。
|
|
74
|
+
コンソール開いて構造など確認はしているのですが酷く被さっている部分はないように思います…
|
|
75
|
+
```css
|
|
76
|
+
body{
|
|
77
|
+
margin: 0;
|
|
78
|
+
padding: 0;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.content{
|
|
82
|
+
border: 1px solid black;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
#maincanvas{
|
|
87
|
+
width: auto;
|
|
88
|
+
height:67vh;/*370px;*/
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.canvas{
|
|
92
|
+
position: absolute;
|
|
93
|
+
top: 0;left: 0;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.mapimgtest{
|
|
97
|
+
position: relative;
|
|
98
|
+
top: 0;left: 0;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.optionbutton{
|
|
102
|
+
margin: 0;
|
|
103
|
+
padding: 0;
|
|
104
|
+
width: 100px;
|
|
105
|
+
height: auto;
|
|
106
|
+
position: absolute;
|
|
107
|
+
top: 0;right: 0;
|
|
108
|
+
}
|
|
109
|
+
//////////////////////////////////////////////////////////////////////////////
|
|
110
|
+
#inputmenu{
|
|
111
|
+
width: auto;
|
|
112
|
+
height: 22vh;/*134px;*/
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.iconimg{
|
|
116
|
+
display:-webkit-flex;
|
|
117
|
+
display: flex;
|
|
118
|
+
-webkit-justify-content: space-around;
|
|
119
|
+
justify-content: space-around;
|
|
120
|
+
padding:0;
|
|
121
|
+
width: auto;
|
|
122
|
+
}
|
|
123
|
+
///////////////////////////////////////////////////////////////////
|
|
124
|
+
#partreader{
|
|
125
|
+
width: auto;
|
|
126
|
+
height: 11vh;/*50px;*/
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.lern{
|
|
130
|
+
position: relative;
|
|
131
|
+
top: 0;left: 0;
|
|
132
|
+
background-color: red;
|
|
133
|
+
width: auto;
|
|
134
|
+
height: 50px;
|
|
135
|
+
}
|
|
136
|
+
#readerimg{
|
|
137
|
+
position: relative;
|
|
138
|
+
left: 0;top:0;
|
|
139
|
+
max-height: 50px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
```
|
|
73
143
|
### 試したこと
|
|
74
144
|
|
|
75
145
|
class名を同じ名前から固有のものに書き換えたり、jQueryでの処理に使うものをclass名とid名とで変えて試したり……
|
5
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -78,4 +78,6 @@
|
|
|
78
78
|
ためしたブラウザはGooglechromeです。
|
|
79
79
|
2番目以降のimg要素には何の問題もなく処理が反映されたので書き方に間違いがあるのではないとと思っています.また、何度かキャッシュを削除してリロードしたりしましたが変わりませんでした….
|
|
80
80
|
（追記）こちらに張り付けたものをコピペで戻して使っても結果は変わらずです.また、動いている処理をコピーして数値の部分だけ1に書き換えても1番目の.membericon1には反応無しでした.
|
|
81
|
-
試しに.membericon1の要素を消すと、次は.membericon2の要素に反応がなくなりました
|
|
81
|
+
試しに.membericon1の要素を消すと、次は.membericon2の要素に反応がなくなりました
|
|
82
|
+
|
|
83
|
+
回答していただいたものを参考にソースコードを書き直しています
|
4
ソースコードを直しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -37,38 +37,38 @@
|
|
|
37
37
|
<!--以下<script>でjsのソースコードを書いています-->
|
|
38
38
|
```
|
|
39
39
|
```js
|
|
40
|
-
|
|
40
|
+
var
|
|
41
|
-
|
|
41
|
+
maincanvas = document.getElementById("maincanvas"),
|
|
42
|
-
|
|
42
|
+
mapground = document.getElementById("mapimgground"),
|
|
43
|
-
|
|
43
|
+
reader = document.getElementById("partreader"),
|
|
44
|
-
|
|
44
|
+
inputarea = document.getElementById("inputmenu"),
|
|
45
45
|
|
|
46
|
-
|
|
46
|
+
canvas_w=maincanvas.clientWidth,canvas_h=maincanvas.clientHeight,
|
|
47
|
-
|
|
47
|
+
lern_w=reader.clientWidth,lern_h=reader.clientWidth,
|
|
48
|
-
|
|
48
|
+
input_w=inputarea.clientWidth,input_h=inputarea.clientWidth;
|
|
49
49
|
|
|
50
|
-
|
|
50
|
+
function main() {
|
|
51
|
-
|
|
51
|
+
mapground.innerHTML+="<img class='mapimg' id='mapimg' src='img/mapimgtest.jpg' width="+canvas_w+" height="+canvas_h+">";
|
|
52
|
-
|
|
52
|
+
};
|
|
53
53
|
|
|
54
|
+
//回答を参考に変更しました
|
|
54
|
-
|
|
55
|
+
$(function(){//やはり動きません
|
|
55
|
-
|
|
56
|
+
$('.membericon1').on('click',function(){
|
|
56
|
-
|
|
57
|
+
console.log("きりかえ1");
|
|
57
|
-
|
|
58
|
+
});
|
|
59
|
+
///////////ここからは動きます///////////////////////////////////////////
|
|
60
|
+
$('.membericon2').bind('touchstart',function(){
|
|
61
|
+
$('#member2').attr('src',"img/face1.jpg");
|
|
58
|
-
|
|
62
|
+
});
|
|
59
|
-
//ここから先は普通に反応します
|
|
60
|
-
$(function(){
|
|
61
|
-
|
|
63
|
+
$('.membericon3').bind('touchstart',function(){
|
|
62
|
-
|
|
64
|
+
console.log("きりかえ3");
|
|
63
|
-
|
|
65
|
+
});
|
|
66
|
+
$('.membericon4').bind('touchstart',function(){
|
|
67
|
+
console.log("きりかえ4");
|
|
64
|
-
|
|
68
|
+
});
|
|
69
|
+
});
|
|
65
70
|
|
|
66
|
-
$(function(){
|
|
67
|
-
$('.membericon3').on('click',function(){
|
|
68
|
-
console.log("きりかえ");
|
|
69
|
-
});
|
|
70
|
-
});
|
|
71
|
-
|
|
71
|
+
main();
|
|
72
72
|
```
|
|
73
73
|
### 試したこと
|
|
74
74
|
|
3
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -77,4 +77,5 @@
|
|
|
77
77
|
### 補足情報（FW/ツールのバージョンなど）
|
|
78
78
|
ためしたブラウザはGooglechromeです。
|
|
79
79
|
2番目以降のimg要素には何の問題もなく処理が反映されたので書き方に間違いがあるのではないとと思っています.また、何度かキャッシュを削除してリロードしたりしましたが変わりませんでした….
|
|
80
|
-
（追記）こちらに張り付けたものをコピペで戻して使っても結果は変わらずです.また、動いている処理をコピーして数値の部分だけ1に書き換えても1番目の.membericon1には反応無しでした.
|
|
80
|
+
（追記）こちらに張り付けたものをコピペで戻して使っても結果は変わらずです.また、動いている処理をコピーして数値の部分だけ1に書き換えても1番目の.membericon1には反応無しでした.
|
|
81
|
+
試しに.membericon1の要素を消すと、次は.membericon2の要素に反応がなくなりました
|
2
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -76,4 +76,5 @@
|
|
|
76
76
|
|
|
77
77
|
### 補足情報（FW/ツールのバージョンなど）
|
|
78
78
|
ためしたブラウザはGooglechromeです。
|
|
79
|
-
2番目以降のimg要素には何の問題もなく処理が反映されたので書き方に間違いがあるのではないとと思っています.また、何度かキャッシュを削除してリロードしたりしましたが変わりませんでした….
|
|
79
|
+
2番目以降のimg要素には何の問題もなく処理が反映されたので書き方に間違いがあるのではないとと思っています.また、何度かキャッシュを削除してリロードしたりしましたが変わりませんでした….
|
|
80
|
+
（追記）こちらに張り付けたものをコピペで戻して使っても結果は変わらずです.また、動いている処理をコピーして数値の部分だけ1に書き換えても1番目の.membericon1には反応無しでした.
|
1
（追記）ここに張り付けたものをまたコピペして確認しましたが結果は変わらずです
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|