teratailでIDを引数にして関数を回す方法を教えてもらいました。
HTML上にある要素のIDをhannmaa_dayo("panPinch","panPinchElm");と定義づけ引数にして関数に渡している、という感覚です（正しいのでしょうか）。
しかしこの場面で、新しい要素を追加した場合、すでにある関数に追加した要素のIDをどのように渡してどのように稼働させていいか分かりません。
おそらく基本的なことなのでしょうがご教示ください。よろしくお願いします。
全文を追記しておきます
html
1 <! DOCTYPE html >
2 < html >
3 < head >
4 < meta charset = " UTF-8 " >
5 < meta name = " viewport " content = " width=device-width,initial-scale=1 " >
6 < title > タッチデバイスとパソコンデバイス </ title >
7 < script src = " src/jquery-3.5.1.min.js " > </ script >
8 < script src = " src/hammer.js " > </ script >
9
10
11
12 < style >
13 * {
14 padding : 0 ;
15 margin : 0 ;
16 }
17 body {
18 color : #666 ;
19 font-family : "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , Osaka , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif ;
20 }
21 h2 {
22 margin-bottom : 15 px ;
23 text-align : center ;
24 }
25 main {
26 max-width : 960 px ;
27 margin : 30 px auto ;
28 }
29 #panPinch {
30 width : 100 % ;
31 padding-bottom : 50 % ;
32 margin-bottom : 30 px ;
33 background : #ffe8ab ;
34 position : relative ;
35 }
36
37 #panPinch .element {
38 width : 120 px ;
39 height : 120 px ;
40 background : #fff ;
41 box-shadow : 0 1 px 3 px rgba ( 0 , 0 , 0 , 0.25 ) ;
42 position : absolute ;
43 top : 120 px ;
44 left : 120 px ;
45 }
46
47 .element {
48 transform : matrix ( 1 , 0 , 0 , 1 , 0 , 0 ) ;
49 }
50
51 }
52 </ style >
53 </ head >
54
55 < body >
56 < main >
57 < h2 > パンとピンチとマウスカーソル </ h2 >
58 < div class = " wheel " > 1 </ div >
59 < div id = " panPinch " >
60 < img class = " element " id = " panPinchElm " src = " 1.jpg " style = " height : 100 px ; z-index : 2 ; " >
61 < img class = " element " id = " panPinchElm2 " src = " 2.jpg " style = " height : 200 px ; width : 200 px ; " >
62 </ div >
63
64 < button id = " btn1 " style = " position : absolute ; z-index : 2 ; top : 10 px ; left : 10 px ; " > 要素生成 </ button >
65 </ main >
66 < script >
67 //document.createElement('main');
68 $ ( "#btn1" ) . click ( function ( ) {
69 $ ( '#panPinch' ) . append ( '<img class="element" id="panPinchElm3" src="3.jpg" style="height:100px;">' ) ;
70 console . log ( '押されました' ) ;
71 hannmaa_dayo ( "panPinch" , "panPinchElm3" ) ;
72 } ) ;
73
74
75
76 $ ( function ( ) {
77 hannmaa_dayo ( "panPinch" , "panPinchElm" ) ;
78 hannmaa_dayo ( "panPinch" , "panPinchElm2" ) ;
79 //hannmaa_dayo("panPinch","panPinchElm3");
80
81 //関数です、繰り返し使えます
82 function hannmaa_dayo ( area_id , elem_id ) {
83 var $tgPanPinchArea = document . getElementById ( area_id ) ,
84 $jqTgPanPinchArea = $ ( $tgPanPinchArea ) ,
85 $tgPanPinchElm = document . getElementById ( elem_id ) ,
86 $jqTgPanPinchElm = $ ( $tgPanPinchElm ) ,
87 $hammerObj = new Hammer ( $tgPanPinchElm ) ,
88 $hammerObj2 = new Hammer ( $tgPanPinchArea ) ,
89 panTime = false ,
90 pinchTime = false ,
91 $pinchTimer = { } ;
92 $hammerObj . get ( "pan" ) . set ( { enable : true } ) ;
93 $hammerObj . get ( "pinch" ) . set ( { enable : true } ) ;
94 $jqTgPanPinchElm . css ( "transform" , "scale(1)" ) ;
95
96 //pan event
97 $hammerObj . on ( "pan" , function ( event ) {
98 if ( event . isFinal ) {
99 //end
100 panTime = false ;
101 $jqTgPanPinchArea . data ( "down" , false ) ;
102 if ( Number ( String ( $jqTgPanPinchElm . css ( "left" ) ) . replace ( "px" , "" ) ) < 0 ) $jqTgPanPinchElm . css ( "left" , "0px" ) ;
103 if ( Number ( String ( $jqTgPanPinchElm . css ( "left" ) ) . replace ( "px" , "" ) ) > $jqTgPanPinchArea . width ( ) - $jqTgPanPinchElm . width ( ) )
104 $jqTgPanPinchElm . css ( "left" , $jqTgPanPinchArea . width ( ) - $jqTgPanPinchElm . width ( ) + "px" ) ;
105 if ( Number ( String ( $jqTgPanPinchElm . css ( "top" ) ) . replace ( "px" , "" ) ) < 0 ) $jqTgPanPinchElm . css ( "top" , "0px" ) ;
106 if ( Number ( String ( $jqTgPanPinchElm . css ( "top" ) ) . replace ( "px" , "" ) ) > $jqTgPanPinchArea . outerHeight ( ) - $jqTgPanPinchElm . height ( ) )
107 $jqTgPanPinchElm . css ( "top" , $jqTgPanPinchArea . outerHeight ( ) - $jqTgPanPinchElm . height ( ) + "px" ) ;
108 } else {
109 if ( ! panTime ) {
110 //start
111 panTime = event . timeStamp ;
112
113 $jqTgPanPinchArea
114 . data ( "down" , true )
115 . data ( "x" , event . center . x )
116 . data ( "y" , event . center . y )
117 . data ( "elmPosX" , Number ( String ( $jqTgPanPinchElm . css ( "left" ) ) . replace ( "px" , "" ) ) )
118 . data ( "elmPosY" , Number ( String ( $jqTgPanPinchElm . css ( "top" ) ) . replace ( "px" , "" ) ) ) ;
119 } else {
120 //move
121 if ( $jqTgPanPinchArea . data ( "down" ) == true ) {
122 $jqTgPanPinchElm . css ( {
123 left : $jqTgPanPinchArea . data ( "elmPosX" ) - ( $jqTgPanPinchArea . data ( "x" ) - event . center . x ) + "px" ,
124 top : $jqTgPanPinchArea . data ( "elmPosY" ) - ( $jqTgPanPinchArea . data ( "y" ) - event . center . y ) + "px" ,
125 } ) ;
126 }
127 }
128 }
129 } ) ;
130
131 //pinch event
132 $hammerObj . on ( "pinch" , function ( event ) {
133 event . preventDefault ? event . preventDefault ( ) : ( event . returnValue = false ) ;
134 if ( ! pinchTime ) {
135 //start
136 pinchTime = event . timeStamp ;
137 var preScale = String ( $jqTgPanPinchElm . css ( "transform" ) ) . replace ( "matrix(" , "" ) ;
138 preScale = preScale . replace ( ")" , "" ) ;
139 preScale = preScale . split ( "," ) ;
140 preScale = Math . sqrt ( preScale [ 0 ] * preScale [ 0 ] + preScale [ 1 ] * preScale [ 1 ] ) ;
141 $jqTgPanPinchArea . data ( "preScale" , preScale ) . data ( "scale" , event . scale ) ;
142 } else {
143 //move
144 if ( $pinchTimer ) clearTimeout ( $pinchTimer ) ;
145 $jqTgPanPinchElm . css ( "transform" , "scale(" + ( $jqTgPanPinchArea . data ( "preScale" ) + ( event . scale - $jqTgPanPinchArea . data ( "scale" ) ) ) + ")" ) ;
146 $pinchTimer = setTimeout ( function ( ) {
147 //end
148 pinchTime = false ;
149 } , 100 ) ;
150 }
151 } ) ;
152 }
153 } ) ;
154 </ script >
155 </ body >
156 </ html >
皆さんの回答を参考に考えると、
デベロッパーツールのエラーコードを記載しておきます。
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/18 16:17