如何在不同的 div 中列出不同的类别？

Question

我正在尝试建立一个搜索教程观看视频的 Flash 游戏网站。我正在使用 Node.js、MongoDB、ejs、bodyparser...。我可以在主页上列出游戏，但我的问题是我不知道如何在不同的 div 中按类别列出游戏。尝试做这样的事情：

|----------------------------------|
| Strategy Games                   |
|                                  |
|   BOX     BOX     BOX      BOX   |
|                                  |
|   BOX     BOX     BOX      BOX   |
|                                  |
|   BOX     BOX     BOX      BOX   |
|__________________________________|

|----------------------------------|
| Tower Def Games                  |
|                                  |
|   BOX     BOX     BOX      BOX   |
|                                  |
|   BOX     BOX     BOX      BOX   |
|                                  |
|   BOX     BOX     BOX      BOX   |
|__________________________________|

我的猫鼬架构：

     var gameName = mongoose.Schema({
         // _id:mongoose.Schema.Types.ObjectId,
         gameName: {type:String, required:"can not be empty"},
         gameCategorie: {type:String, required:"can not be empty"},
         gameImg: {type:String, required:"can not be empty"},
         gamePath: {type:String, required:"bcan not be empty"},
         gameTags: {type:String, required:"can not be empty"},
         editor: {type:String, required:"can not be empty"},
 });

主页：

    <div class="container" >
    <div class="new-game">

            <div class="games">
              <h6 class= "yeniOyun" style="text-align: left; color:cyan;">Yeni Oyunlar</h6>
              <ul class="games-thumb"> 
                  <%  gamesInfo.forEach(  (game)=>{ %>
                  <li>
                    <a href="/oyun/<%= game._id %>" class="sa">
                      <img src="<%=game.gameImg%>" alt="">
                    </a>
                    <span><%=game.gameName%></span>
                  </li>
                  <% } );                   %>
                    </ul>
                </div>
          </div>
          <div>
          <div class="games">
            <h6 class= "yeniOyun" style="text-align: left; color:crimson;">Strateji Oyunları</h6>
            <ul class="games-thumb">
 --------------Im Trygin Something Like This ^^ obviously not working-----------
                <%  if(gamesInfo.gameCategorie ===[ "strateji"]) { %>
                <%  gamesInfo.forEach(  (game)=>{ %>
                <li>
                  <a href="/oyun/<%= game._id %>" class="sa">
                    <img src="<%=game.gameImg%>" alt="">
                  </a>
                  <span><%=game.gameName%></span>
                </li>
                <%});}%>
          </ul>
          </div>
          </div>
        </div>
    <% include ./partials/footer %>

那是我家的路由器

router.get('/', function(req, res) {
            gameName.find({},(err,gamesInfo)=>{
                if(err){
                    console.log("BANKAI")
                    console.log(err);
                }else{
                    res.render('home',{gamesInfo:gamesInfo} );
                }
            });
            }); 

Answer 1

我认为您将 if 语句放在错误的位置。您必须先有 for 循环，然后在 for 循环中使用 if 语句。

这是我会尝试的（在伪代码中，您可以尝试在您的项目中实现实际代码）：

<div class="strategyGames">
gamesInfo.forEach(game){
if(game.gameCategorie == "strategy"){
<li>
   <a href="/oyun/<%= game._id %>" class="sa">
    <img src="<%=game.gameImg%>" alt="">
   </a>
   <span><%=game.gameName%></span>
</li>
}
}
</div>

<br>

<div class="otherGames">
gamesInfo.forEach(game){
if(game.gameCategorie == "other"){  //other means the other category you want to list
<li>
   <a href="/oyun/<%= game._id %>" class="sa">
    <img src="<%=game.gameImg%>" alt="">
   </a>
   <span><%=game.gameName%></span>
</li>
}
}
</div>

希望这会有所帮助。