JavaScript / for文からbreakでうまく抜けられていない事案を解決したい
※※1回目の回答をいただいたあと、kei344さんに作成いただいたサンプルを元に質問を編集させていただきました。
最初の質問では必要な範囲が記載しきれていませんでした。
Javascript初級者です。
Javascriptでモーダルウィンドウを実装しています。(#iconOpenをクリックすると#worksDetailWebを表示します)
「work-web」というクラスが付与されたdivをdisplay:noneで非表示にし、
「current」というクラスがついたdivのみdisplay:blockで表示しています。
「#iconRight」ボタンを押すとひとつ次のdivに「current」クラスを付与して内容を切り替える動きを実装しようとしたところ、for文が意図どおりに動作しませんでした。
該当のソースコード
HTML
1<div id="iconOpen">iconOpen</div> 2 3<div id="worksDetailWeb" class="dispnone"> 4 <div id="iconClose">iconClose</div> 5 <div id="iconRight">iconRight</div> 6 7 <div id="wrapper"> 8 <div class="work-web current" id="div01">div01</div> 9 <div class="work-web" id="div02">div02</div> 10 <div class="work-web" id="div03">div03</div> 11 <div class="work-web" id="div04">div04</div> 12 <div class="work-web" id="div05">div05</div> 13 </div> 14</div>
CSS
1#worksDetailWeb { 2 border: 1px solid #000; 3} 4.current { 5 color: red; 6} 7.dispnone { 8 display: none; 9}
Javascript
1 2const worksDetailWeb = document.getElementById('worksDetailWeb'); 3const eachWebWorks = document.getElementsByClassName('work-web'); 4const iconRight = document.getElementById('iconRight'); 5const iconClose = document.getElementById('iconClose'); 6const iconOpen = document.getElementById('iconOpen'); 7 8function worksDetail(){ 9 //#iconRightをクリック→currentクラスを削除して1つ次のdivにcurrentクラスを付与する。 10 iconRight.addEventListener('click', function (e) { 11 for (i = 0; i < eachWebWorks.length-1; i++) { 12 let self = eachWebWorks[i]; 13 if (self.classList.contains('current')) { 14 self.classList.remove('current'); 15 eachWebWorks[i + 1].classList.add('current'); 16 break; 17 } 18 } 19 }); 20 21 //#iconCloseをクリック→currentクラスを#div01に付与し直す。 22 iconClose.addEventListener('click', function (e) { 23 for (let eachWebWork of eachWebWorks) { 24 if (eachWebWork.classList.contains('current')) { 25 eachWebWork.classList.remove('current'); 26 eachWebWorks[0].classList.add('current'); 27 break; 28 } 29 } 30 worksDetailWeb.classList.add('dispnone'); 31 }); 32} 33 34//#iconOpenを開いたらモーダル部分を表示する 35iconOpen.addEventListener('click', function (e) { 36 e.preventDefault(); 37 if (worksDetailWeb.classList.contains('dispnone')) { 38 worksDetailWeb.classList.remove('dispnone'); 39 worksDetail(); 40 } 41}) 42 43
発生している問題・エラーメッセージ
1回目は#div01→#div02→#div03→#div04→#div05
と期待した通り動いたのですが、一度#iconCloseボタンでモーダルを閉じ、再度開くと
2回目は#div01→#div03→#div05
3回目は#div01→#div04→#div05
4回目以降は#div01→#div05
という動きになってしまいました。
breakの前の行にconsole.logを入れて確認したところ、
表示されなかったdivの部分はbreakせずに次の処理に進んでしまっていました。
補足情報(FW/ツールのバージョンなど)
初めて質問させていただきます。質問の仕方に不備などありましたら申し訳ありません。
何卒よろしくお願いします。
回答3件
あなたの回答
tips
プレビュー