初めての質問になります。最近jQueryを使ってimgタグをクリックした際、その画像が切り替わる(srcを書き換える)処理をしたいと思っています。
しかし、同じようにclassやidを設定しているimg要素を使ってテストすると、1番目の要素には何の反応も起こらない状態になってしまいます。2番目以降の要素に対し同じようにjQueryの処理を書くと想定通りに動いてくれます。
知りたいこととしては、「なぜ1番目の要素にだけ処理が適用されないのか」ということだけです。
HTMLのソースと同じhtmlファイルに書いたjs部分を一緒に載せておきます。何かピンとくる原因があれば教えていただきたいです。
まだまだ勉強中の身なので基礎の質問になってしまいますが、何卒よろしくお願いします。
該当のソースコード
HTML
1<html> 2<head> 3 <link rel="stylesheet" href="battlemap.css"> 4 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 5 6</head> 7<body> 8 9 <div class="content" id="maincanvas"> 10 <div class="mapimg" id="mapimgground"></div> 11 <button class="optionbutton" id="optionbutton">オプション</button> 12 <canvas class="maincanvas" id="main"></canvas> 13 </div> 14 <div class="content" id="partreader"> 15 <div class="lern" id="lern"><img class="readerimg" id="readerimg" src="img/face5.jpg"></div> 16 </div> 17 <div class="content" id="inputmenu"> 18//問題のある部分↓ 19 <div class="iconimg" id="iconimg"> 20 <img class="membericon1" id="member1" src="img/face1.jpg"> 21 <img class="membericon2" id="member2" src="img/face2.jpg"> 22 <img class="membericon3" id="member3" src="img/face3.jpg"> 23 <img class="membericon4" id="member4" src="img/face4.jpg"> 24 </div> 25 </div> 26<!--以下<script>でjsのソースコードを書いています-->
js
1 var 2 maincanvas = document.getElementById("maincanvas"), 3 mapground = document.getElementById("mapimgground"), 4 reader = document.getElementById("partreader"), 5 inputarea = document.getElementById("inputmenu"), 6 7 canvas_w=maincanvas.clientWidth,canvas_h=maincanvas.clientHeight, 8 lern_w=reader.clientWidth,lern_h=reader.clientWidth, 9 input_w=inputarea.clientWidth,input_h=inputarea.clientWidth; 10 11 function main() { 12 mapground.innerHTML+="<img class='mapimg' id='mapimg' src='img/mapimgtest.jpg' width="+canvas_w+" height="+canvas_h+">"; 13 }; 14 15 //回答を参考に変更しました 16 $(function(){//やはり動きません 17 $('.membericon1').on('click',function(){ 18 console.log("きりかえ1"); 19 }); 20 ///////////ここからは動きます/////////////////////////////////////////// 21 $('.membericon2').bind('touchstart',function(){ 22 $('#member2').attr('src',"img/face1.jpg"); 23 }); 24 $('.membericon3').bind('touchstart',function(){ 25 console.log("きりかえ3"); 26 }); 27 $('.membericon4').bind('touchstart',function(){ 28 console.log("きりかえ4"); 29 }); 30 }); 31 32 main();
新しく要因となりそうな部分を指摘いただいたのでcssファイルを追記しました。
コンソール開いて構造など確認はしているのですが酷く被さっている部分はないように思います…
css
1body{ 2 margin: 0; 3 padding: 0; 4} 5 6.content{ 7 border: 1px solid black; 8} 9 10 11#maincanvas{ 12 width: auto; 13 height:67vh;/*370px;*/ 14} 15 16.canvas{ 17 position: absolute; 18 top: 0;left: 0; 19} 20 21.mapimgtest{ 22position: relative; 23top: 0;left: 0; 24} 25 26.optionbutton{ 27 margin: 0; 28 padding: 0; 29 width: 100px; 30 height: auto; 31 position: absolute; 32 top: 0;right: 0; 33} 34////////////////////////////////////////////////////////////////////////////// 35#inputmenu{ 36 width: auto; 37 height: 22vh;/*134px;*/ 38} 39 40.iconimg{ 41 display:-webkit-flex; 42 display: flex; 43 -webkit-justify-content: space-around; 44 justify-content: space-around; 45 padding:0; 46 width: auto; 47} 48/////////////////////////////////////////////////////////////////// 49#partreader{ 50 width: auto; 51 height: 11vh;/*50px;*/ 52} 53 54.lern{ 55 position: relative; 56 top: 0;left: 0; 57 background-color: red; 58 width: auto; 59 height: 50px; 60} 61#readerimg{ 62 position: relative; 63 left: 0;top:0; 64 max-height: 50px; 65} 66
試したこと
class名を同じ名前から固有のものに書き換えたり、jQueryでの処理に使うものをclass名とid名とで変えて試したり……
補足情報(FW/ツールのバージョンなど)
ためしたブラウザはGooglechromeです。
2番目以降のimg要素には何の問題もなく処理が反映されたので書き方に間違いがあるのではないとと思っています.また、何度かキャッシュを削除してリロードしたりしましたが変わりませんでした….
(追記)こちらに張り付けたものをコピペで戻して使っても結果は変わらずです.また、動いている処理をコピーして数値の部分だけ1に書き換えても1番目の.membericon1には反応無しでした.
試しに.membericon1の要素を消すと、次は.membericon2の要素に反応がなくなりました
回答していただいたものを参考にソースコードを書き直しています
回答5件
あなたの回答
tips
プレビュー