デベロッパーツールでは正常なのにsafariなどで開くとうまく機能しない

Question

現在HTML→WordPress化をしているのですが、JavaScriptがうまく機能しません。
詳しくいうと、10枚ほどのポップアップ画像を「prev」「next」ボタンで前後の画像と切り替える仕様にしたく、HTMLサイトのJSではchrome,safari共に機能しますが、今WordPress化しようとしている方では、ポップアップ画像が表示されません。
それについてもteratailで質問しているのですが（ご興味を持っていただけましたら、そちらについてもご覧いただけたらと思います）、それ以前にデベロッパーツール上と他媒体上、サイト上で機能が異なるという問題が、今一番私にとって障害となっています。
どういうことかというと、デベロッパーツールで確認しながらクリックしてもちゃんと動いているのですが、safariで開くと、「prev」「next」どちらを押しても１番目のポップアップ画像に飛ばされます（本来なら最初にクリックした画像を基準に前後１枚）
iphoneではそもそも１枚も画像が読み込まれていません。
このように開く場所などによって表示が変わるのは、どのように対処すれば良いのでしょうか、デベロッパーツールがほぼ機能していない状況なので、どなたかご教授していただきたいです。

        <div id="popup-img" class="default">
            <img src="<?php echo get_template_directory_uri(); ?>/images/image/1.jpg" alt="ポップアップ">
            <div id="popup-close-btn" class="popup-close-btn"><i class="fa-solid fa-xmark"></i></div>
            <div class="popup-change-btn">
                <div id="popup-prev-btn" class="change-btn"><i class="fa-solid fa-chevron-left"></i></i></div>
                <div id="popup-next-btn" class="change-btn"><i class="fa-solid fa-chevron-right"></i></div>
            </div>
        </div>
        <ul id="containers-p" class="containers-p">
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/1.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/2.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/3.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/4.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/5.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/6.jpg" alt=""></li>
            <li class="container-p flex-pc"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/7.jpg" alt=""></li>
            <li class="container-p flex-pc"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/8.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/9.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/10.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/11.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/12.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/13.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/14.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/15.jpg" alt=""></li>
            <li class="container-p"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/16.jpg" alt=""></li>
            <li class="container-p flex"><img class="pop_trigger" src="<?php echo get_template_directory_uri(); ?>/images/image/17.jpg" alt=""></li>
        </ul>

(function($){
  let imageSources = ["/images/image/1.jpg","/images/image/2.jpg","/images/image/3.jpg","/images/image/4.jpg","/images/image/5.jpg","/images/image/6.jpg","/images/image/7.jpg","/images/image/8.jpg","/images/image/9.jpg","/images/image/10.jpg","/images/image/11.jpg","/images/image/12.jpg","/images/image/13.jpg","/images/image/14.jpg","/images/image/15.jpg","/images/image/16.jpg","/images/image/17.jpg",];

  $('#container-p img').each(function() {
    let path = $(this).attr("src");
    imageSources.push(path); 
  });
  let sourceIndex = 0;

  $("#containers-p img").on("click", function () {
    let img_src = $(this).attr("src");
    sourceIndex = imageSources.indexOf(img_src); 
    $("#popup-img img").attr("src", img_src);
    $("#popup-img").toggleClass('active');
  });

  $("#popup-close-btn").on("click", function () {
    $("#popup-img").removeClass('active');
  });


  $('#popup-prev-btn').on("click", function() {
    sourceIndex = (sourceIndex + imageSources.length - 1) % imageSources.length;
    updatePopupImage();
  });

  $('#popup-next-btn').on("click", function() {
    sourceIndex = (sourceIndex + 1) % imageSources.length;
    updatePopupImage();
  });

  function updatePopupImage() {
    $("#popup-img img").attr("src", imageSources[sourceIndex]);
  }
})(jQuery);

Comments

[yambejp]

ソースがないとなんとも回答のしようがありません。
今の情報で可能性を考えると「ちゃんと書いてない」か「ブラウザが対応していない」か
「試した環境がおかしい」などでしょうか。
codepenなどどこか動作が確認できるサイトにソースをアップして例示されるとよいでしょう
試した動作環境のOSやブラウザのバージョンを記載すると回答の精度が上がると思います

[Lhankor_Mhy]

コードをご提示ください。

[Lhankor_Mhy]

なお、『ご興味を持っていただけましたら、そちらについてもご覧いただけたらと思います』とのことですが、興味を持って数日前に回答している方がいらっしゃるようですので、気づいていなかったのであれば応答をしてください。
（もちろん強制ではありません）

回答があったことには気づいているが敢えて無視をしている、という話であれば、この質問に「時間の無駄なので回答には応答しません」と記述しておくと、回答者も回答すべきかどうか判断がしやすいので、お互いに時間の無駄がなくなって親切かもしれません。
（もちろん強制ではありません）

[KazuhiroHatano]

全く同じコードが動いたり動かなかったりする場合は、
キャッシュの有無で一部要素のloadイベントが発生したりしなかったり、
スクリプトの実行のタイミングが前後したりといったことが考えられますが
WordPress移行前はそんなことはなかったというのであれば
移行作業に不備があるのではないかと思います

[Lhankor_Mhy]

「デベロッパーツール」とはこれのことですか？
https://developer.chrome.com/docs/devtools/

[matsu33]

コードの追加をしました。現在はfunctions.phpに<?phpとしか入力していません。重ねての質問なのですが、WordPressでのこのJSのimg srcにも<?php echo get_template_directory_uri(); ?>をつけた方が良いのでしょうか

Lhankor_Mhy様
前回の質問に回答をいただいたものの、この質問内容にある通り、コードが間違っているのか、コードは合っているが私の環境のせいでうまく反映されていないのかが分からず、本来は正しいコードを回答してくださったのに「できませんでした」と答えるのが申し訳なくなり、どう返信すれば良いか分からずに、この質問が解決してから返信しようと考えていました。自己中心的な判断でした。
デベロッパーツールはchromeの右上の3つの点からそのほかのツールのデベロッパーツールです

[Lhankor_Mhy]

かしこまりました。余計なことを申し上げました。失礼いたしました。

Answer 1

　ご質問は、「Chrome Devtools で確認したものと、iOS Safari 実機で確認したものとの、動作が違うことについて何とかしたい」ということですよね？

　それは何ともならないです。

Think of Device Mode as a first-order approximation of how your page looks and feels on a mobile device. With Device Mode you don't actually run your code on a mobile device. You simulate the mobile user experience from your laptop or desktop.

Simulate mobile devices with Device Mode - Chrome Developers

　とあるように、Chrome Devtools での表示は、あくまで Chrome での表示になりますので、Safari での表示ではないです。デバイスモードは、UA偽装、タッチエミュレーション、解像度・画面サイズ調整などをしたシミュレーションです。

　ですので、実機で確認するしかないです。

　なお、Chrome 以外のブラウザでも 最新版Edge や Opera については、中身が Chrome と同じなので問題が起きにくい傾向があります。
Blink (レンダリングエンジン) - Wikipedia

　Android は Chrome を使っているユーザーがかなり多いため、問題が起きにくいです。Firefox はアップデートが比較的早いため最新の機能を使わない限り問題が起きにくいです。またシェアが小さい上にユーザーに変わり者が多く多少の問題はユーザー自身で対処するので、ある程度は無視していいかと思います。

　ということで、Chrome のデバイスモードでチェックした後は、MacOS Safari と iOS Safari をチェックすれば、完全ではないですが大きな問題は起きにくいだろうと思います。