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

Posted 2023-03-11

【中文标题】如何在不同的 div 中列出不同的类别？

【英文标题】：How can I list different caregory in different div?

【发布时间】：2018-09-03 21:57:22

【问题描述】：

我正在尝试建立一个搜索教程观看视频的 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%>" >
                    </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%>" >
                  </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 );
                
            );
            ); 

【参考方案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%>" >
   </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%>" >
   </a>
   <span><%=game.gameName%></span>
</li>


</div>

希望这会有所帮助。

【讨论】：

非常感谢您对代码工作的帮助。实际上我之前尝试过，但也许我有一些语法错误或拼写错误，所以认为我的方式是错误的，但在你回答之后，我又尝试了一次，它的工作原理。