画像モーダルのページ送りを非表示にできない

前提・実現したいこと

画像モーダルをvanilla js で自作しています。

グループの最初か最後の画像を開いたとき、ページ送りで最初か最後の画像に到達したときに矢印を非表示にしたいです。

コードを書きましたが、非表示にならず困っています。
なにが違うのか分からず非常に困っていますので、お力を貸していただけると大変助かります。

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

エラーなし

該当のソースコード

html
1<!-- gallery -->
2<div class="img-fit-01">
3  <div class="aspect-box spinner">
4    <img alt class="lazyload modal-imgs" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="width: 100%; height: 100%;" data-group="gallery-01" data-src="img/photo/04.png" data-caption="画像の詳細を書けます 01-02">
5  </div>
6  <aside>モーダルサンプル 02 / data-group でグループ化</aside>
7</div>
8
9<!-- image modal -->
10<div class="modal-wrapper spinner">
11  <div class="modal-img">
12    <div class="mid"><img alt src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></div>
13    <div class="mp-prev"></div>
14    <div class="mp-next"></div>
15    <div class="mp-close"></div>
16    <aside class="modal-aside">xxx</aside>
17  </div>
18</div>

css
1.modal-wrapper {
2  overflow: hidden;
3  display: flex;
4  position: fixed;
5  align-items: center;
6  justify-content: center;
7  flex-direction: column;
8  top: 0;
9  left: 0;
10  width: 100%;
11  height: 100%;
12  z-index: 5;
13  opacity: 0;
14  background: rgba(255,255,255, 1);
15  transition: .25s ease-out;
16  pointer-events: none;
17}
18
19.modal-wrapper.show {
20  opacity: 1;
21  pointer-events: all;
22}
23
24.modal-img {
25  display: flex;
26  position: relative;
27  align-items: center;
28  justify-content: space-around;
29  flex-direction: column;
30  max-width: 80%;
31  max-height: 90%;
32  z-index: 4;
33}
34
35.modal-img .mid {
36  display: flex;
37  position: relative;
38  align-items: center;
39  justify-content: center;
40  flex-grow: 1;
41  max-height: calc(90%);
42  width: 100%;
43  padding-bottom: .5rem;
44}
45
46.modal-img img {
47  max-width: 100%;
48  max-height: 100%;
49  margin: auto;
50  opacity: 0;
51  transition: .5s ease-out;
52  z-index: 1;
53}
54
55.modal-img img.show {
56  opacity: 1;
57}
58
59.modal-wrapper aside {
60  position: relative;
61  max-width: 80%;
62  padding: 0;
63  border: none;
64  clip-path: none;
65}
66
67.modal-wrapper aside::after {
68  display: none;
69}
70
71.mp-prev, .mp-next, .mp-close {
72  position: absolute;
73  width: 25px;
74  height: 25px;
75  cursor: pointer;
76  z-index: 8;
77}
78
79.mp-prev, .mp-next {
80  transform: translateY(-50%);
81  top: 50%;
82}
83
84.mp-prev {
85  left: 10px;
86}
87
88.mp-next {
89  right: 10px;
90}
91
92.mp-close {
93  bottom: .5vh;
94  right: 0;
95}
96
97.mp-close::before, .mp-close::after {
98  display: block;
99  position: absolute;
100  content: "";
101  transform: rotate(45deg) translateY(-50%);
102  transform-origin: 50%;
103  top: 50%;
104  width: 19px;
105  height: 1px;
106  margin: auto;
107  background: var(--text);
108}
109
110.mp-close::before {
111  left: 0;
112}
113
114.mp-close::after {
115  transform: rotate(-45deg);
116}
117
118:is(.mp-prev, .mp-next)::after {
119  display: block;
120  position: absolute;
121  content: "";
122  top: 0;
123  bottom: 0;
124  left: 0;
125  right: 0;
126  width: 15px;
127  height: 15px;
128  margin: auto;
129  transition: .3s;
130}
131
132.mp-next::after {
133  transform: rotate(-45deg);
134  border-right: 1px solid #555;
135  border-bottom: 1px solid #555;
136}
137
138.mp-prev::after {
139  transform: rotate(45deg);
140  border-bottom: 1px solid #555;
141  border-left: 1px solid #555;
142}

js
1/* modal ---------------------------------------------------- */
2waitForElement('.wrp').then(node => {
3  const modalWrapper = node.getElementsByClassName('modal-wrapper')[0];
4  const images = node.querySelectorAll('.modal-imgs');
5  const modalImgWrp = node.getElementsByClassName('modal-img')[0];
6  const modalImage = node.querySelector('.modal-img img');
7  const modalAside = node.getElementsByClassName('modal-aside')[0];
8  const modalPrev = node.getElementsByClassName('mp-prev')[0];
9  const modalNext = node.getElementsByClassName('mp-next')[0];
10  const modalClose = node.getElementsByClassName('mp-close')[0];
11  if (modalWrapper != null) {
12    let listItems = node.querySelectorAll('.modal-imgs'),
13      listItem = Array.prototype.slice.call(listItems, 0);
14    listItem.forEach(function ($listItem, i) {
15      let imageSrc = $listItem.getAttribute('data-src'),
16        imageCaption = $listItem.getAttribute('data-caption');
17      $listItem.dataset.num = (i + 1);
18      $listItem.addEventListener('click', function () {
19        document.body.style.overflowY = 'hidden';
20        let imageGroup = this.getAttribute('data-group');
21        images.forEach(function (img) {
22          if (img.getAttribute('data-group') === imageGroup) {
23            img.classList.add('on');
24          }
25        });
26        if ($listItem.getAttribute('data-num') == 1) {
27          modalPrev.style.visibility = 'hidden';
28        }
29        modalImage.dataset.num = this.getAttribute('data-num');
30        let thisNum = parseInt(modalImage.getAttribute('data-num'));
31        if (!node.querySelector('[data-num="' + (thisNum - 1) + '"].on')) {
32          modalPrev.style.visibility = 'hidden';
33        } // 効かない
34        if (!node.querySelector('[data-num="' + (thisNum + 1) + '"].on')) {
35          modalNext.style.visibility = 'hidden';
36        } // 効かない
37        modalPrev.style.visibility = 'visible';
38        modalNext.style.visibility = 'visible';
39        modalWrapper.classList.add('show');
40        modalWrapper.classList.add('spinner');
41        modalImage.classList.add('show');
42        modalImage.src = imageSrc;
43        modalAside.textContent = imageCaption;
44        setTimeout(function () {
45          modalWrapper.classList.remove('spinner');
46        }, 200);
47      });
48    });
49    modalPrev.addEventListener('click', function () {
50      let prevNum = parseInt(modalImage.getAttribute('data-num'));
51      if (!node.querySelector('[data-num="' + (prevNum - 2) + '"].on')) {
52        modalPrev.style.visibility = 'hidden';
53      } // 効かない
54      modalPrev.style.visibility = 'visible';
55      modalNext.style.visibility = 'visible';
56      let prevImg = node.querySelector('[data-num="' + (prevNum - 1) + '"].on'),
57        prevSrc = prevImg.getAttribute('data-src'),
58        prevCaption = prevImg.getAttribute('data-caption');
59      modalImage.src = prevSrc;
60      modalAside.textContent = prevCaption;
61      modalWrapper.classList.add('spinner');
62      modalImage.dataset.num = prevNum - 1;
63      setTimeout(function () {
64        modalWrapper.classList.remove('spinner');
65      }, 200);
66    });
67    modalNext.addEventListener('click', function () {
68      let nextNum = parseInt(modalImage.getAttribute('data-num'));
69      if (!node.querySelector('[data-num="' + (nextNum + 2) + '"].on')) {
70        modalNext.style.visibility = 'hidden';
71      } // 効かない
72      console.log(nextNum + 2); // 取得できる
73      modalPrev.style.visibility = 'visible';
74      modalNext.style.visibility = 'visible';
75      let nextImg = node.querySelector('[data-num="' + (nextNum + 1) + '"].on'),
76        nextSrc = nextImg.getAttribute('data-src'),
77        nextCaption = nextImg.getAttribute('data-caption');
78      modalImage.src = nextSrc;
79      modalAside.textContent = nextCaption;
80      modalWrapper.classList.add('spinner');
81      modalImage.dataset.num = nextNum + 1;
82      setTimeout(function () {
83        modalWrapper.classList.remove('spinner');
84      }, 200);
85    });
86    modalClose.addEventListener('click', function () {
87      document.body.style.overflowY = 'auto';
88      images.forEach(function (img) {
89        img.classList.remove('on');
90      });
91      if (modalWrapper.classList.contains('show')) {
92        modalWrapper.classList.remove('show');
93        modalImage.classList.remove('show');
94      }
95    });
96    modalWrapper.addEventListener('click', (e) => {
97      if (e.target.querySelector('.modal-img')) {
98        document.body.style.overflowY = 'auto';
99        images.forEach(function (img) {
100          img.classList.remove('on');
101        });
102        if (modalWrapper.classList.contains('show')) {
103          modalWrapper.classList.remove('show');
104          modalImage.classList.remove('show');
105        }
106      }
107    });
108  };
109});
110/* modal ------------------------------------------------ end */
111  
112/* append DOM ---------------------------------------------------- */
113function waitForElement(selector, text = null) {
114  return new Promise(resolve => {
115    const nodes = document.querySelectorAll(selector);
116    for (const node of nodes) {
117      if (node.nodeType === 1 && (text === null || node.textContent === text)) {
118        return resolve(node);
119      }
120    }
121    const observer = new MutationObserver(mutations => {
122      for (const mutation of mutations) {
123        for (const node of mutation.addedNodes) {
124          if (node.nodeType !== 1) {
125            // needs ELEMENT_NODE only. exclude TEXT_NODE and other stuff.
126            continue;
127          }
128          if (node.matches(selector) && (text === null || node.textContent === text)) {
129            observer.disconnect();
130            return resolve(node);
131          }
132        }
133      }
134    });
135    observer.observe(document, {
136      childList: true,
137      subtree: true,
138      attributes: false,
139      characterData: false,
140    });
141  });
142}
143/* append DOM ------------------------------------------------ end */

試したこと

コンソールで、

js
1console.log(nextNum + 2);

など、次の画像の数字を出してみたところ、問題なく取得できているのですが、

js
1if(!xx) {}

がうまく動いていないようです。

どう書き直せばいいのか全くお手上げですので、どうかご助力くださいますよう、お願いいたします。

補足情報（FW/ツールのバージョンなど）

firefox 最新版

行動規範の内容に同意します

回答1件

自己解決

js
1let thisNum = parseInt(modalImage.getAttribute('data-num'));
2          if (!node.querySelector('[data-num="' + (thisNum - 1) + '"].on')) {
3            modalPrev.style.visibility = 'hidden';
4          } else {
5            modalPrev.style.visibility = 'visible';
6          }
7          if (!node.querySelector('[data-num="' + (thisNum + 1) + '"].on')) {
8            modalNext.style.visibility = 'hidden';
9          } else {
10            modalNext.style.visibility = 'visible';
11          }
12

js
1let prevNum = parseInt(modalImage.getAttribute('data-num'));
2        modalNext.style.visibility = 'visible';
3        if (!node.querySelector('[data-num="' + (prevNum - 2) + '"].on')) {
4          modalPrev.style.visibility = 'hidden';
5        } else {
6          modalPrev.style.visibility = 'visible';
7        }

js
1let nextNum = parseInt(modalImage.getAttribute('data-num'));
2        modalPrev.style.visibility = 'visible';
3        if (!node.querySelector('[data-num="' + (nextNum + 2) + '"].on')) {
4          modalNext.style.visibility = 'hidden';
5        } else {
6          modalNext.style.visibility = 'visible';
7        }
8