Question

我试图折叠用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>

感谢您的帮助。

Answer 1

您的.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，以防万一尚不清楚。

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

1 个答案: