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

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

ただいまの
回答率

88.58%

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

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 622

mijinko889

score 33

初めての質問になります。最近jQueryを使ってimgタグをクリックした際、その画像が切り替わる(srcを書き換える)処理をしたいと思っています。

しかし、同じようにclassやidを設定しているimg要素を使ってテストすると、1番目の要素には何の反応も起こらない状態になってしまいます。2番目以降の要素に対し同じようにjQueryの処理を書くと想定通りに動いてくれます。
知りたいこととしては、「なぜ1番目の要素にだけ処理が適用されないのか」ということだけです。
HTMLのソースと同じhtmlファイルに書いたjs部分を一緒に載せておきます。何かピンとくる原因があれば教えていただきたいです。
まだまだ勉強中の身なので基礎の質問になってしまいますが、何卒よろしくお願いします。

 該当のソースコード

<html>
<head>
  <link rel="stylesheet" href="battlemap.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

</head>
<body>

  <div class="content" id="maincanvas">
    <div class="mapimg" id="mapimgground"></div>
    <button class="optionbutton" id="optionbutton">オプション</button>
    <canvas class="maincanvas" id="main"></canvas>
  </div>
  <div class="content" id="partreader">
    <div class="lern" id="lern"><img class="readerimg" id="readerimg" src="img/face5.jpg"></div>
  </div>
  <div class="content" id="inputmenu">
//問題のある部分↓
    <div class="iconimg" id="iconimg">
        <img class="membericon1" id="member1" src="img/face1.jpg">
        <img class="membericon2" id="member2" src="img/face2.jpg">
        <img class="membericon3" id="member3" src="img/face3.jpg">
        <img class="membericon4" id="member4" src="img/face4.jpg">
    </div>
  </div>
<!--以下<script>でjsのソースコードを書いています-->
 var
        maincanvas = document.getElementById("maincanvas"),
        mapground = document.getElementById("mapimgground"),
        reader = document.getElementById("partreader"),
        inputarea = document.getElementById("inputmenu"),

        canvas_w=maincanvas.clientWidth,canvas_h=maincanvas.clientHeight,
        lern_w=reader.clientWidth,lern_h=reader.clientWidth,
        input_w=inputarea.clientWidth,input_h=inputarea.clientWidth;

      function main() {
          mapground.innerHTML+="<img class='mapimg' id='mapimg' src='img/mapimgtest.jpg' width="+canvas_w+" height="+canvas_h+">";
      };

  //回答を参考に変更しました
        $(function(){//やはり動きません
          $('.membericon1').on('click',function(){
            console.log("きりかえ1");
          });
          ///////////ここからは動きます///////////////////////////////////////////
          $('.membericon2').bind('touchstart',function(){
            $('#member2').attr('src',"img/face1.jpg");
          });
          $('.membericon3').bind('touchstart',function(){
            console.log("きりかえ3");
          });
          $('.membericon4').bind('touchstart',function(){
            console.log("きりかえ4");
          });
        });

      main();


新しく要因となりそうな部分を指摘いただいたのでcssファイルを追記しました。
コンソール開いて構造など確認はしているのですが酷く被さっている部分はないように思います…

body{
  margin: 0;
  padding: 0;
}

.content{
  border: 1px solid black;
}


#maincanvas{
   width: auto;
   height:67vh;/*370px;*/
}

.canvas{
  position: absolute;
  top: 0;left: 0;
}

.mapimgtest{
position: relative;
top: 0;left: 0;
}

.optionbutton{
  margin: 0;
  padding: 0;
  width: 100px;
  height: auto;
  position: absolute;
  top: 0;right: 0;
}
//////////////////////////////////////////////////////////////////////////////
#inputmenu{
  width: auto;
  height: 22vh;/*134px;*/
}

.iconimg{
  display:-webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    padding:0;
  width: auto;
}
///////////////////////////////////////////////////////////////////
#partreader{
  width: auto;
  height: 11vh;/*50px;*/
}

.lern{
  position: relative;
  top: 0;left: 0;
  background-color: red;
  width: auto;
  height: 50px;
}
#readerimg{
  position: relative;
  left: 0;top:0;
  max-height: 50px;
}

 試したこと

class名を同じ名前から固有のものに書き換えたり、jQueryでの処理に使うものをclass名とid名とで変えて試したり……

 補足情報(FW/ツールのバージョンなど)

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yukihisa

    2018/10/16 16:13 編集

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

    キャンセル

  • mijinko889

    2018/10/16 16:27

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

    キャンセル

  • mijinko889

    2018/10/16 16:58

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

    キャンセル

回答 5

checkベストアンサー

+1

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/16 17:10

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

    キャンセル

  • 2018/10/16 17:10 編集

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

    キャンセル

  • 2018/10/16 17:11

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

    キャンセル

+1

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

        $('.membericon1').on('touchstart',function(){
          console.log("touchstart1");
        });
        $('#inputmenu').on('click',function(e){
          console.log('#inputmenu click');
          console.log(e.target.outerHTML);
        });
        $('#inputmenu').on('touchstart',function(e){
          console.log('#inputmenu touchstart');
          console.log(e.target.outerHTML);
        });

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/16 08:48

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

    キャンセル

  • 2018/10/16 12:09

    またまた回答ありがとうございます!出掛けている最中ですので帰ってきてから試してみようと思います。
    ちなみに#inputmenuに対して処理を作ると#member1への変更は適応されました。

    #member1に作ったイベントが反応しないといった感じになってます………

    提案いただいたソースでログを確認してみます!

    キャンセル

  • 2018/10/16 13:14

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

    キャンセル

  • 2018/10/16 15:59

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/16 08:54

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

    キャンセル

0

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

$(function(){
  main();
  $('.membericon1').on('click',function(){
    console.log("きりかえ");
  });
  $('.membericon2').on('click',function(){
    $('#member2').attr('src',"img/face1.jpg");
  });
  $('.membericon3').on('click',function(){
    console.log("きりかえ");
  });
});

 仮に・・・

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

$(function(){
  main();
  $(document).on('click','.membericon1',function(){
    console.log("きりかえ");
  });
  $(document).on('click','.membericon2',function(){
    $('#member2').attr('src',"img/face1.jpg");
  });
  $(document).on('click','.membericon3',function(){
    console.log("きりかえ");
  });
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/16 10:28

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

    キャンセル

  • 2018/10/16 15:57

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

    キャンセル

  • 2018/10/16 16:08

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

    キャンセル

0

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

         $(function(){
           $('.membericon1').on('click',function(){
             $('#member1').attr('src',"img/face5.jpg");
             console.log("きりかえ1");
           });
           $('.membericon2').on('click',function(){
             $('#member2').attr('src',"img/face5.jpg");
             console.log("きりかえ2");
           });
           $('.membericon3').on('click',function(){
             $('#member3').attr('src',"img/face5.jpg");
             console.log("きりかえ3");
           });
           $('.membericon4').on('click',function(){
             $('#member4').attr('src',"img/face5.jpg");
             console.log("きりかえ4");
           });
         });

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/16 16:02

    環境も添えていただきありがとうございます。私はwindows10で動かしています。
    連打の入力も使いたいので修正中ではありますが.clickから.bindにしました。

    ただどのように判定を書いてみても.membericon1要素には反応が無いですね…

    キャンセル

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

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る