トグルスイッチを使用して画像を切り替えたい。

Question

はじめての質問となります。

今現在、レスポンシブでサイト制作をしているのですが、一部のレイアウトにおいて設置できない部分がございましたので質問させていただきます。

結果的には、下記ソースコードにあるトグルスイッチをクリックを押す度に、対象の画像が切り替わるというデザインにしたいと思っています。

個人で調べた結果、jqueryを使用してのtoggleを使ってクリックするたびに画像を切り替えるという設定ではないかと個人的に思い、それに該当するタグなどを挿入しても画像が切り替わることができませんでした。
初心者のような質問で申し訳ありませんが、宜しくお願いします。

該当のソースコード

<h1><a href="<?php echo home_url('/'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/common/header_logo.png" width="152" height="74" alt="logo"></a></h1>
<!--上記ロゴを下記トグルスイッチを押すたびに交互に切り替えたい-->


<div id="gnav_toggle"><span>MENU</span></div>
<!--上記はレスポンシブ時に発生するトグルスイッチ(開閉ボタン)です。-->

試したこと

<!--下記はサイトで検索し試したみたソースです。--> <script> $(".hogehoge").toggle( function() { $(this).attr('src', 'images/bbb.png'); $(".hogehoge2").css("display","block"); }, function() { $(this).attr('src', 'images/aaa.png'); $(".hogehoge2").css("display","none"); } ); </script> <!--HTML--> <img src="images/aaa.png" class="hogehoge"> <div class="hogehoge2"> ここにいろいろ書いておく </div>

追記ですいません。
下記の方法でも試してみました。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $('.button').on('click', function () { $('.button').toggleClass('one'); }); </script>

よろしくお願いします。

Answer 1

<script>
$(function(){
  $('.hogehoge').on('click',function(){
    var src=$(this).data('src');
    $(this).data('src',$(this).attr('src'));
    $(this).attr('src',src);
    $(this).nextAll('.hogehoge2').toggle();
  });
});
</script>
<img src="1.jpg" data-src="2.jpg" class="hogehoge">
<div class="hogehoge2">
ここにいろいろ書いておく
</div>

Comments

[D-programming]

ご回答いただきましてありがとうございます。
すいません、度々質問してもよろしいでしょうか？
回答の方に記載して頂いた「<img src="1.jpg" data-src="2.jpg" class="hogehoge">」に今回切り替える画像パスを記載し、「class="hogehoge2"」には、該当するソース「<div id="gnav_toggle"><span>MENU</span></div>」に追記すればよいという事なのでしょうか？
無知で何から何までもうしわけございませんが、よろしくお願いします。