質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

5回答

546閲覧

jQueryについて反応するタグ反応しないタグの質問です

mijinko889

総合スコア33

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/10/15 14:40

編集2018/10/16 07:25

初めての質問になります。最近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の要素に反応がなくなりました

回答していただいたものを参考にソースコードを書き直しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yukihisa

2018/10/16 07:18 編集

現象切り分けのために、HTMLのmembericon1を2番目に移動させてみたり、javascript側のmembericon1を2番目に移動させてみると現象はどうなるでしょうか?エラーが変わらないならmembericon1のHTMLかjavascriptの記述に不備があり、移動後に1番上に来る要素でエラーが出るようになるのならまた違う部分で問題が起きているはずです。回答の流れを見る限り、提示されていないCSSの設定が悪さをしているように感じます。最初の要素が表示される領域の上に別の領域がかぶさってクリックできないんじゃないかな?
mijinko889

2018/10/16 07:27

cssについての要因はないだろうと思っていますが言われてみると不安になりますね…。cssファイルも質問文の方に追加いたしました.よければ確認お願いします.また、.membericon1要素を削除したりはすでに試しており、そうすいた場合次は.membericon2が反応しなくなる状態になります.座標に関しては自動で間隔を開けて配置するようにしていえるつもりです.
mijinko889

2018/10/16 07:58

深夜に投げた質問にたくさんのアドバイスありがとうございました!!要因の特定やjQqueryの記述方法など勉強になりました。情報提供が不足だったため長い時間お付き合いいただいてすいません…。直接解決に繋がる要因を考えてくださった方をBAに選ばせていただきました。サイトの使い方も覚えていきますので以後よろしくお願いいたします。
guest

回答5

0

ベストアンサー

CSSの提示ありがとうございます。
確認しましたが、<canvas class="maincanvas" id="main"></canvas>membericon1の領域にかぶっているようです。
codepen
画像はリンクしていませんが、.maincanvasを色付けしているのでご確認ください。

※レイアウトをどのようにしたいのかが分からないため、現象の確認のみとしていますがご了承ください。

投稿2018/10/16 07:46

編集2018/10/16 07:50
yukihisa

総合スコア672

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mijinko889

2018/10/16 07:50

ありがとうございます!自分も不要なdiv要素を消してみたところ.membericon1の反応が現れました!!! cssの確認用コードまでありがとうございます.また別の構成方法も検討してみます
colling

2018/10/16 07:56

ああwこれはクリックできそうにないですね。
yukihisa

2018/10/16 07:57

ソースの配置を変更するとエラーが変わるということは、ソース以外の部分が悪さをしている可能性が濃厚です。 css、javascript等で使用しないセレクタの設定は極力控える、クラス名とid名で同じ名前を使用しない、という風に作業するのが吉ですよー。
mijinko889

2018/10/16 08:02

お恥ずかしい話css指摘されるまでcanvasのclass名を間違えて記述していました… 自分の凡ミスに付き合わせてしまいすいません…
yukihisa

2018/10/16 08:04

colling 様 おそらく最初はこのクラスに画像を表示させたかったんじゃないかな、と推測します。 位置的にも、サイズ的にもちょうどいいので。。。
yukihisa

2018/10/16 08:09

まぁ、この辺りは慣れと色々なパターンに触れることも必要なので気にせずに失敗を忘れないようにすることが大事です。 一回はまると視野が狭まるので自力解決が難しい場合は質問しても問題ないですよ!
mijinko889

2018/10/16 08:10

その通りですね…。<canvas>を囲っているdivのサイズを指定いた後その下に<canvas>がくる構造を直し忘れていました。
mijinko889

2018/10/16 08:11 編集

コンソールの使い方やcssの勉強もしっかりしなければなりませんね…
colling

2018/10/16 08:11

yukihisa 様 数時間、パズルを解くように謎解きしてました。(笑 さすがです!
guest

0

以下の追加をしたらどうなりますか?

javascript

1 $('.membericon1').on('touchstart',function(){ 2 console.log("touchstart1"); 3 }); 4 $('#inputmenu').on('click',function(e){ 5 console.log('#inputmenu click'); 6 console.log(e.target.outerHTML); 7 }); 8 $('#inputmenu').on('touchstart',function(e){ 9 console.log('#inputmenu touchstart'); 10 console.log(e.target.outerHTML); 11 });

投稿2018/10/15 15:28

編集2018/10/16 01:36
kaba

総合スコア314

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mijinko889

2018/10/15 23:48

おはようございます、提案していただいたように修正すると.membericon3の「きりかえ3」のみ表示され1番目は特に反応なしです。2番目の方はきちんと画像変更されています。
mijinko889

2018/10/16 03:09

またまた回答ありがとうございます!出掛けている最中ですので帰ってきてから試してみようと思います。 ちなみに#inputmenuに対して処理を作ると#member1への変更は適応されました。 #member1に作ったイベントが反応しないといった感じになってます……… 提案いただいたソースでログを確認してみます!
kaba

2018/10/16 04:14

#inputmenuにイベント処理を入れているのは、.membericon1をクリックしたときでもイベント伝搬されるので、どこの要素が反応したのかをconsole.log(e.target.outerHTML);によって確認するためです。
mijinko889

2018/10/16 06:59

伝搬というのもあるんですか!勉強になります。 書いていただいたソースを試したところ、.membericon2~4はきちんとそれぞれ反応がありましたが.membericon1はタッチしてもコンソールに何も表示されませんでした
guest

0

.bind('touchstart',function()に変更されたようですけど、うちでは、それでは動かなくて、.on('click',function()なら全部動いてます。
Mac版google chromeです。

javascript

1 $(function(){ 2 $('.membericon1').on('click',function(){ 3 $('#member1').attr('src',"img/face5.jpg"); 4 console.log("きりかえ1"); 5 }); 6 $('.membericon2').on('click',function(){ 7 $('#member2').attr('src',"img/face5.jpg"); 8 console.log("きりかえ2"); 9 }); 10 $('.membericon3').on('click',function(){ 11 $('#member3').attr('src',"img/face5.jpg"); 12 console.log("きりかえ3"); 13 }); 14 $('.membericon4').on('click',function(){ 15 $('#member4').attr('src',"img/face5.jpg"); 16 console.log("きりかえ4"); 17 }); 18 });

投稿2018/10/16 05:33

colling

総合スコア798

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mijinko889

2018/10/16 07:02

環境も添えていただきありがとうございます。私はwindows10で動かしています。 連打の入力も使いたいので修正中ではありますが.clickから.bindにしました。 ただどのように判定を書いてみても.membericon1要素には反応が無いですね…
guest

0

とくにどこというところはなさそうですが

javascript

1$(function(){ 2 main(); 3 $('.membericon1').on('click',function(){ 4 console.log("きりかえ"); 5 }); 6 $('.membericon2').on('click',function(){ 7 $('#member2').attr('src',"img/face1.jpg"); 8 }); 9 $('.membericon3').on('click',function(){ 10 console.log("きりかえ"); 11 }); 12});

仮に・・・

質問文では読み取れませんでしたが動的処理をしているとか?
(1番めのimgはmain()で読み込んだimgなので何も動作してい指定ないように見えますが・・・)

javascript

1$(function(){ 2 main(); 3 $(document).on('click','.membericon1',function(){ 4 console.log("きりかえ"); 5 }); 6 $(document).on('click','.membericon2',function(){ 7 $('#member2').attr('src',"img/face1.jpg"); 8 }); 9 $(document).on('click','.membericon3',function(){ 10 console.log("きりかえ"); 11 }); 12});

投稿2018/10/16 00:29

編集2018/10/16 00:48
yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mijinko889

2018/10/16 00:39

おはようございます、そのようにまとめて記述もできたんですね! しかし提案していただいた様に書き直しましたがやはり1番目の要素にだけ反応がありません…
mijinko889

2018/10/16 00:52

いえ、main()で処理しているのは別のimg要素になります。処理を反映させたい部分は横に並べた画像になっており、設置はhtmlで始めからあるものですね。 余計な部分まで記述してしまってすいません。 一番目のimgというのは、htmlソースコードでコメントしてある『問題の部分』以下にあるimg群のやつです!
yambejp

2018/10/16 01:28

documentから参照してもだめだったということですか?
mijinko889

2018/10/16 06:57

ただいま戻りました。教えていただいたようにdocumentにしてみても結果は同じようです
mijinko889

2018/10/16 07:08

すいません、結果が同じといいましたが、正確には「.membericon1をタッチしたとき.membericon3の処理と同じログが表示される」状態です.
guest

0

こちらの環境にそのままコピペしたら、ちゃんとmembericon1も動いてますねー。
どこか、TABのつもりが全角スペースになってしまっていたりしてないですか?

投稿2018/10/15 15:33

colling

総合スコア798

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mijinko889

2018/10/15 23:54

おはようございます、念のため1番目要素の処理を一行にまとめた後改行、前後の空行も埋めてみましたが結果変わらずです…
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問