質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

erp
erp

総合スコア45

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

0クリップ

254閲覧

投稿2022/01/04 06:40

前提・実現したいこと

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

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

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

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

エラーなし

該当のソースコード

html

<!-- gallery --> <div class="img-fit-01"> <div class="aspect-box spinner"> <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"> </div> <aside>モーダルサンプル 02 / data-group でグループ化</aside> </div> <!-- image modal --> <div class="modal-wrapper spinner"> <div class="modal-img"> <div class="mid"><img alt src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></div> <div class="mp-prev"></div> <div class="mp-next"></div> <div class="mp-close"></div> <aside class="modal-aside">xxx</aside> </div> </div>

css

.modal-wrapper { overflow: hidden; display: flex; position: fixed; align-items: center; justify-content: center; flex-direction: column; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; background: rgba(255,255,255, 1); transition: .25s ease-out; pointer-events: none; } .modal-wrapper.show { opacity: 1; pointer-events: all; } .modal-img { display: flex; position: relative; align-items: center; justify-content: space-around; flex-direction: column; max-width: 80%; max-height: 90%; z-index: 4; } .modal-img .mid { display: flex; position: relative; align-items: center; justify-content: center; flex-grow: 1; max-height: calc(90%); width: 100%; padding-bottom: .5rem; } .modal-img img { max-width: 100%; max-height: 100%; margin: auto; opacity: 0; transition: .5s ease-out; z-index: 1; } .modal-img img.show { opacity: 1; } .modal-wrapper aside { position: relative; max-width: 80%; padding: 0; border: none; clip-path: none; } .modal-wrapper aside::after { display: none; } .mp-prev, .mp-next, .mp-close { position: absolute; width: 25px; height: 25px; cursor: pointer; z-index: 8; } .mp-prev, .mp-next { transform: translateY(-50%); top: 50%; } .mp-prev { left: 10px; } .mp-next { right: 10px; } .mp-close { bottom: .5vh; right: 0; } .mp-close::before, .mp-close::after { display: block; position: absolute; content: ""; transform: rotate(45deg) translateY(-50%); transform-origin: 50%; top: 50%; width: 19px; height: 1px; margin: auto; background: var(--text); } .mp-close::before { left: 0; } .mp-close::after { transform: rotate(-45deg); } :is(.mp-prev, .mp-next)::after { display: block; position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; width: 15px; height: 15px; margin: auto; transition: .3s; } .mp-next::after { transform: rotate(-45deg); border-right: 1px solid #555; border-bottom: 1px solid #555; } .mp-prev::after { transform: rotate(45deg); border-bottom: 1px solid #555; border-left: 1px solid #555; }

js

/* modal ---------------------------------------------------- */ waitForElement('.wrp').then(node => { const modalWrapper = node.getElementsByClassName('modal-wrapper')[0]; const images = node.querySelectorAll('.modal-imgs'); const modalImgWrp = node.getElementsByClassName('modal-img')[0]; const modalImage = node.querySelector('.modal-img img'); const modalAside = node.getElementsByClassName('modal-aside')[0]; const modalPrev = node.getElementsByClassName('mp-prev')[0]; const modalNext = node.getElementsByClassName('mp-next')[0]; const modalClose = node.getElementsByClassName('mp-close')[0]; if (modalWrapper != null) { let listItems = node.querySelectorAll('.modal-imgs'), listItem = Array.prototype.slice.call(listItems, 0); listItem.forEach(function ($listItem, i) { let imageSrc = $listItem.getAttribute('data-src'), imageCaption = $listItem.getAttribute('data-caption'); $listItem.dataset.num = (i + 1); $listItem.addEventListener('click', function () { document.body.style.overflowY = 'hidden'; let imageGroup = this.getAttribute('data-group'); images.forEach(function (img) { if (img.getAttribute('data-group') === imageGroup) { img.classList.add('on'); } }); if ($listItem.getAttribute('data-num') == 1) { modalPrev.style.visibility = 'hidden'; } modalImage.dataset.num = this.getAttribute('data-num'); let thisNum = parseInt(modalImage.getAttribute('data-num')); if (!node.querySelector('[data-num="' + (thisNum - 1) + '"].on')) { modalPrev.style.visibility = 'hidden'; } // 効かない if (!node.querySelector('[data-num="' + (thisNum + 1) + '"].on')) { modalNext.style.visibility = 'hidden'; } // 効かない modalPrev.style.visibility = 'visible'; modalNext.style.visibility = 'visible'; modalWrapper.classList.add('show'); modalWrapper.classList.add('spinner'); modalImage.classList.add('show'); modalImage.src = imageSrc; modalAside.textContent = imageCaption; setTimeout(function () { modalWrapper.classList.remove('spinner'); }, 200); }); }); modalPrev.addEventListener('click', function () { let prevNum = parseInt(modalImage.getAttribute('data-num')); if (!node.querySelector('[data-num="' + (prevNum - 2) + '"].on')) { modalPrev.style.visibility = 'hidden'; } // 効かない modalPrev.style.visibility = 'visible'; modalNext.style.visibility = 'visible'; let prevImg = node.querySelector('[data-num="' + (prevNum - 1) + '"].on'), prevSrc = prevImg.getAttribute('data-src'), prevCaption = prevImg.getAttribute('data-caption'); modalImage.src = prevSrc; modalAside.textContent = prevCaption; modalWrapper.classList.add('spinner'); modalImage.dataset.num = prevNum - 1; setTimeout(function () { modalWrapper.classList.remove('spinner'); }, 200); }); modalNext.addEventListener('click', function () { let nextNum = parseInt(modalImage.getAttribute('data-num')); if (!node.querySelector('[data-num="' + (nextNum + 2) + '"].on')) { modalNext.style.visibility = 'hidden'; } // 効かない console.log(nextNum + 2); // 取得できる modalPrev.style.visibility = 'visible'; modalNext.style.visibility = 'visible'; let nextImg = node.querySelector('[data-num="' + (nextNum + 1) + '"].on'), nextSrc = nextImg.getAttribute('data-src'), nextCaption = nextImg.getAttribute('data-caption'); modalImage.src = nextSrc; modalAside.textContent = nextCaption; modalWrapper.classList.add('spinner'); modalImage.dataset.num = nextNum + 1; setTimeout(function () { modalWrapper.classList.remove('spinner'); }, 200); }); modalClose.addEventListener('click', function () { document.body.style.overflowY = 'auto'; images.forEach(function (img) { img.classList.remove('on'); }); if (modalWrapper.classList.contains('show')) { modalWrapper.classList.remove('show'); modalImage.classList.remove('show'); } }); modalWrapper.addEventListener('click', (e) => { if (e.target.querySelector('.modal-img')) { document.body.style.overflowY = 'auto'; images.forEach(function (img) { img.classList.remove('on'); }); if (modalWrapper.classList.contains('show')) { modalWrapper.classList.remove('show'); modalImage.classList.remove('show'); } } }); }; }); /* modal ------------------------------------------------ end */ /* append DOM ---------------------------------------------------- */ function waitForElement(selector, text = null) { return new Promise(resolve => { const nodes = document.querySelectorAll(selector); for (const node of nodes) { if (node.nodeType === 1 && (text === null || node.textContent === text)) { return resolve(node); } } const observer = new MutationObserver(mutations => { for (const mutation of mutations) { for (const node of mutation.addedNodes) { if (node.nodeType !== 1) { // needs ELEMENT_NODE only. exclude TEXT_NODE and other stuff. continue; } if (node.matches(selector) && (text === null || node.textContent === text)) { observer.disconnect(); return resolve(node); } } } }); observer.observe(document, { childList: true, subtree: true, attributes: false, characterData: false, }); }); } /* append DOM ------------------------------------------------ end */

試したこと

コンソールで、

js

console.log(nextNum + 2);

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

js

if(!xx) {}

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

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

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

firefox 最新版

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。