実現したい事
現在、ejsを使用しながらHPを作成しております。
似たようなコンテンツが多いのでforEachを使ってまとめて書きたいと考えました。
しかし、上手く行かずハマっているので、是非ご教授頂きたいです。
ちなみに完成形のイメージとしてはこちらです。↓
上記のようなboxを12個作ります。
発生している問題・エラーメッセージ
現状はこんな感じになっています。↓
一つのboxで各画像を12回繰り返している感じになっています。
該当のソースコード
index.ejs
<% var title= "TOP"; var description = "トップのdescription"; %> <% var mainName = ['01','04','06','08','10','12','14','14','14','14','14','14']; %> <% var mainIcon = ['46','48','50','52','54','56','58','60','62','63','65','66']; %> <% var mainTitle = ['16','19','21','23','26','28','31','33','35','37','40','43']; %> <% include src/ejs/template/_head %> <div class="l-main"> <% include src/ejs/template/_sidebar %> <div class="l-main__menu"> <% for (var i = 0; i < 12; i++) { %> <div class="p-menuBox"> <% mainName.forEach(function (value) { %> <div class="p-menuBox__name"><img src="../assets/images/mainmenu/menu/spr_top01_<%= value %>.png"></div> <% }); %> <div class="p-menuBox__inner"> <% mainIcon.forEach(function (value) { %> <div class="p-menuBox__icon"><img src="../assets/images/mainmenu/icon/spr_top01_<%= value %>.png"></div> <% }); %> <% mainTitle.forEach(function (value) { %> <div class="p-menuBox__title"><img src="../assets/images/mainmenu/menu2/spr_top01_<%= value %>.png"></div> <% }); %> <div class="p-menuBox__text"> <p>グッピーズは、人材採用をITで革新し続ける企業です。</p> </div> </div> </div><% } %> </div> <% include src/ejs/template/_footer %>
_menuBox.scss
.p-menuBox { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; height: 230px; width: 230px; border: solid 1px #cc9933; &:nth-of-type(n + 4) { margin-top: 10px; } &:hover { background-color: #bbb; } #{&}__name { display: inline-block; width: 100%; height: 15px; margin-top: 10px; } #{&}__inner { display: flex; flex-wrap: wrap; justify-content: center; width: 200px; } #{&}__icon { width: 80px; height: 80px; } #{&}__title { margin-top: 10px; width: 100%; height: 20px; } #{&}__text { margin-top: 10px; font-size: 5px; font-size: 0.5rem; } }
なぜこうなっているのか現在原因を究明している所です。
詳しい方ございましたら、アドバイスまた参考サイトをご教授頂けますと幸いです。
補足情報(FW/ツールのバージョンなど)
・npm -v 6.9.0
・node -v 12.6.0
・webpack -v 5.65.0
・ yarn -v 1.22.17
まだ回答がついていません
会員登録して回答してみよう