jquery - 让jQuery在使用EJS模板创建的特定div中工作？

我试图折叠用EJS呈现的一行列，但我只想折叠被单击的组中的列。我试图给div一个类和一个ID，但是当我试图折叠这个类时，所有的列都被折叠，即使那些不在这个组中的列也是，如果我试图折叠一个ID，它只会折叠其中一个列。
我认为jQuery很简单：

$('.groupName').on('click', function() {
      $('.col').fadeToggle();
});

但是我仍然找不到一个使用ejs逻辑的方法。
我的代码：

<div class="container" style="margin-top: 70px;margin-bottom: 30px;">
            <% groups.forEach(group => { %>
                <% if(group.active == true) { %>
                    <div class="row d-flex justify-content-start">
                        <div class="container">
                            <span id="group" class="groupName"><%= group.groupName %> </span>
                        </div>
                        <% apps.forEach(app => { %>
                            <% if (app.groupId == group.groupId && app.active == true) { %>
                                    <div class="col" id="app">
                                        <div class="card text-center" style="width: 20rem;height: 20rem;">
                                            <div class="card-body d-flex flex-column justify-content-between">
                                                <div class="d-flex flex-column">
                                                    <h5 class="card-title"><a href="<%= app.route %>"><strong><%= app.appName %></strong></a></h5>
                                                    <p class="card-text text-muted giveMeEllipsis"><strong><%= app.appDescription %></strong></p>
                                                </div>
                                                <div class="d-flex flex-column justify-content-between">
                                                    <div class="d-flex justify-content-between ">
                                                        <a href="#" class="card-link mt-auto"><i class="fa fa-shopping-cart mr-auto"></i></a>
                                                        <p class="card-text text-muted"><strong><%= app.count %></strong></p>
                                                    </div>
                                                    <div class="d-flex justify-content-end">
                                                        <p class="card-text"><strong><%= app.appName %></strong></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            <% } %>
                        <% }) %>
                    </div>
                <% } %>
            <% }) %>
        </div>

谢谢你的帮助。

最佳答案

您的.col选择器正在选择全局类。在单击特定的.groupName时，首先需要标识包含.col类的父类。此外，您应该使用this引用单击的元素，以便您的淡入逻辑仅封装在您单击的元素的范围内。试试下面的？

$('.groupName').on('click', function() {
    var rowElement = $(this).parent().parent(); // Two levels up in
                                                // order to select
                                                // <div class="row d-flex justify-content-start">
    rowElement.find('.col').fadeToggle();
});

为你做了一点jsfiddle以防还不清楚。