attrで画像切り替えをボタンで繰り返し行いたい

Question

お世話になっております。
webサイトのナビゲーション部分を作成しております。
最初は各メニューのアイコンのみ表示しており、
"nav_button"を押すと、アイコンにテキストがついた画像に切り替わるというものです。

（イメージ）
☆(nab_buton)
〇
△
□
↓ボタン押下
☆
〇トップ
△ニュース
□リンク

nav_buttonひとつで複数画像を一気に切り替えたいです。
現在、切り替えまではうまくいきましたが、下記のように、nav_buttonを再度押したら初期状態に戻るという動作を付けたいです。

初期状態　　　1回押下　　　　2回押下　　3回押下　…
XXX.png　⇒XXX_click.png⇒XXX.png⇒XXX_click.png　…

jsはほぼ未経験でここからどうすればよいのか分からないので、お知恵を貸していただきたく存じます。
よろしくお願い致します。

 <nav class="globalMenuSp">
  <ul>
      <li class="nav_button"><img src="img/top/menu.png"></li>
      <li class="nav_top"><a href="/"><img src="img/top/top.png"></a></li>
      <li class="nav_news" ><a href="news.html"><img src="img/top/news.png"></a></li>
    </ul>
  </nav>

$(function(){
	$('.nav_button').on('click', function() {
				$('.nav_button img').attr('src', 'img/top/menu_click.png');
				$('.nav_top   img').attr('src', 'img/top/top_click.png');
				$('.nav_news  img').attr('src', 'img/top/news_click.png');
	});

Answer 1

// 案1
$(function () {
  let clicked = true;
  $(".nav_button").on("click", function () {
    if (visible) {
      $(".nav_button img").attr("src", "img/top/menu.png");
      $(".nav_top   img").attr("src", "img/top/top.png");
      $(".nav_news  img").attr("src", "img/top/news.png");
    } else {
      $(".nav_button img").attr("src", "img/top/menu_click.png");
      $(".nav_top   img").attr("src", "img/top/top_click.png");
      $(".nav_news  img").attr("src", "img/top/news_click.png");
    }
    clicked = !clicked;
  });
});

// 案2
$(function () {
  $(".nav_button").on("click", function () {
    const visible = !!$("nav").attr("data-cliecked");
    $("nav").attr("data-cliecked", !visible);
    if (visible) {
      $(".nav_button img").attr("src", "img/top/menu.png");
      $(".nav_top   img").attr("src", "img/top/top.png");
      $(".nav_news  img").attr("src", "img/top/news.png");
    } else {
      $(".nav_button img").attr("src", "img/top/menu_click.png");
      $(".nav_top   img").attr("src", "img/top/top_click.png");
      $(".nav_news  img").attr("src", "img/top/news_click.png");
    }
  });
});

// 案3
$(function () {
  let clicked = true;
  $(".nav_button").on("click", function () {
    const visible = !!$("nav").attr("cliecked");
    $("nav").attr("cliecked", !visible);
    const prefix = visible ? "_click" : "";
    $(".nav_button img").attr("src", `img/top/menu${prefix}.png`);
    $(".nav_top   img").attr("src", `img/top/top${prefix}.png`);
    $(".nav_news  img").attr("src", `img/top/news${prefix}.png`);
    clicked = !clicked;
  });
});

他
dom にクリックされたときのURL を入れておいて jQueryで処理する

<li class="nav_button"><img src="img/top/menu.png" data-clickedurl="img/top/menu_clicked.png"></li>

他
ul 単位で切り替える

  <ul class="normal">
      <li class="nav_top"><a href="/"><img src="img/top/top.png"></a></li>
  </ul>
  <ul class="clicked" style="display:none;">
      <li class="nav_top"><a href="/"><img src="img/top/top_clicked.png"></a></li>
  </ul>

Comments

[meli]

ありがとうございます！

Answer 2

単に初期にしたいのでしたらlocation.reload() すると良いです。
あとはその前にボタン押すたびにカウンターをインクリメントさせていくとか、フラグ持っておくとか、要件次第でかえてください。

別案として、
画像名に法則性あるのでしたら、リストで持っておいて切り替えるといいかなと。

さらに別案として
全てhtmlに持っておいて、hide/showだけ切り替えるのもありです。

Comments

[meli]

ご回答ありがとうございます。

[m.ts10806]

案がほしいわけではないならそのように書いておいてください。
※ただ「コードください」と直球に書くと質問ではなく作業依頼になりますが。

あくまでヒントから考えてもらいたくてこのように回答しています。
考える力がないといずれにせよプログラミングは身に付きませんので。

[meli]

案がほしかったので、お二方のご回答を参考にさせていただきました。
回答待ちの間に自分で書いていたコードを、お二方の意見を元に改良していこうと思い、
その上で、より詳しく案を出して下さった回答者様からのご回答をベストアンサーにさせていただいたのですが…。
何か気に障ったようでしたら申し訳ございません。