js初心者です。attrでの画像変更表示について。

Question

前提・実現したいこと

JavaScriptのクリックイベント、attrを使用し、画像の変更を行いたいです。

発生している問題・エラーメッセージ

エラーメッセージは出ていないのですが、全く動きません。
animateなどだと正常に動作します。
初心者の質問で大変お恥ずかしいのですが、教えていただければ幸いです。

該当のソースコード

  <div class="sec_1">
      <div class="sec_1_img"><img src="images/panda_boy.png"></div>
      <p class="black">黒</p>
   </div>

$(function () {
  $('.sec_1_img').click(function () {
    $(this).attr('src', './img/girl.jpg');
  });
});

試したこと

下記サイト
https://mon-navi.com/2016/06/jquery_19/
などのコードをコピペしても動作しません。
cssアニメをつけているのですが、そちらも関係するのでしょうか。

どうぞよろしくお願いします。

Answer 1

クリックターゲットが、div、ようは親要素なのに、
その要素自身のsrc属性を変更しようとしているからです。
下記で解決するかと。

$(function () {
  $('.sec_1_img').click(function () {
    $(this).children('img').attr('src', './img/girl.jpg');
  });
});

Comments

[miyabi_pudding]

初めのうちは、
jQueryなどで、イベント付与した際に、
関数内でのthisには何が入っているのだろうか？
と確認しながら実装を進めるとよいかと。

[Pnd01]

ご回答ありがとうございます！！！
正常に動作しました！感激です。。
要素のターゲットを全く理解できておりませんでしたが、他のところでも活かせます。

こんなにも早くお答えいただき本当にありがとうございました。

[Pnd01]

他にも同じ内容で動作しないところがあったのですが、thisを見直してみると全部が親要素の指定になっていました。
this内の確認を意識しながら続けたいと思います。

初心者すぎる質問にも丁寧に本当にありがとうございます。

[miyabi_pudding]

JavaScriptのthisは非常に厄介な仕様なので、
慣れるまでは時間がかかるかもしれませんが、
頑張ってください。
（jQueryでは、けっこう扱いやすいように工夫されています）

[Pnd01]

そうなんですね、、まだ全てが厄介の段階にいるのですが慣れるまで頑張ります。
そして、お陰様で昨日無事に作成することができました！
ありがとうございました！