カレントの実装（画像切り替え）

Question

ナビのカレント表示を画像の切り替えで行いたいです。
参考サイト（https://www.snack-world.jp/trejarers/）

パスの該当階層部分（https://〇〇.net/〇〇/〇〇/index.html←この部分）とhrefリンク値が一致していれば、画像のファイル名入れ替え（デフォルトからオンに）
というふうに実装したいのですが、反映されません。

      <nav id="navigation" class="main_nav">
        <div class="inner_nav">
          <ul class="mn_ul">
            <li class="mn_li_1"><a href="index.html"><img src="./asset/images/inc/nav_li_1_d.png" alt=""></a></li>
            <li class="mn_li_2"><a href=""><img src="./asset/images/inc/nav_li_2_d.png" alt=""></a></li>
            <li class="mn_li_3"><a href=""><img src="./asset/images/inc/nav_li_3_d.png" alt=""></a></li>
            <li class="mn_li_4"><a href=""><img src="./asset/images/inc/nav_li_4_d.png" alt=""></a></li>
            <li class="mn_li_5"><a href=""><img src="./asset/images/inc/nav_li_5_d.png" alt=""></a></li>
            <li class="mn_li_6"><a href=""><img src="./asset/images/inc/nav_li_6_d.png" alt=""></a></li>
          </ul>
          
        </div>
      </nav>

$(function(){

    var pageURL = location.pathname,
    pageURLArr = pageURL.split('/'), //パスを分割して配列化する
    pageURLArrCategory = pageURLArr[2]; //パスから第1階層を取得
  
    $('.inner_nav > ul > li > a').each(function (i, v) {
      var selfhref = $(v).attr('href'),
        hrefArr = selfhref.split('/'), //href属性の値を分割して配列化する
        hrefArrCategory = hrefArr[1]; //href属性の第1階層を取得
  
      //パスの第1階層とhref属性の第1階層を比較して同じ値であれば画像名切り替え
      if (pageURLArrCategory === hrefArrCategory) {
        $(v).setAttribute("src", this.getAttribute("src").replace("_on.", "_d."));
      }
  
    });
  
  });

お手数おかけいたしますが、
宜しくお願いします。

Comments

[m.ts10806]

うまくいかない
では何も伝わりませんので、実際に起きている現象を具体的に記載願います。
あと、Javascriptだけでは再現確認できませんので、他者がコピペで再現できるようご配慮願います

[m.ts10806]

nav
のことなら「ナビゲーション」の略なので強いてなら「ナビ」かと思います。

Answer 1

とりあえず単純に間違っている個所だけでも列挙しておきます。

• まず、質問文のa要素のhrefとpageLocationの階層は絶対に一致しません。なぜならどのa要素hrefにも階層に当たるパスが記載されていないからです。まずちゃんとしたテストデータをつくること。
• pageLocationとhref、それぞれから取得する階層の位置が違う。html上のhref指定値がいい加減なので記載の配列番号で合っているか確認のしようがありません。正しいのであれば別に構いません。
• 画像を切り替える部分の実装（ifの中）は全面的におかしい。

vはa要素なのにa要素のsrcを変更しようとしている。
jqueryオブジェクトに対してsetAttribute,getAttributeしているのも誤り。jqueryの基礎知識が全くない状態でコードを書いているのがよくわかる。
replaceの引数も誤り。_dを _onに変更したいのであれば引数は逆。

以上のことを解決するためのアドバイスとしては、

• ちゃんと作動するテストデータを作ること。「想定する状態」をしっかりイメージできないと最適なテストデータは作れない。
• 検証ツールのブレークポイントやconsole.logで怪しいと思われる変数の中身を逐次チェックすること。今回の件ではsplitした結果や配列から取得した文字列が想定通りか確認しながら実装するべし。
• jquery関数もメソッドチェーンでつないで書けるのがウリだけど初心者には途中経過が見えない悪魔の構文です。初心者マークが取れるまでは1関数ずつ切り離して都度中身をconsole.log等で確認したほうが良い。
• jqueryの基礎知識が乏しいと思われるので、しっかり再勉強することをお勧めします。ネットの情報は断片的で体系だったものは皆無と考えていいので初心者向けの書籍を買って使い方を一通り習得するのが、結果的には遠回りになりません。