使用 jQuery 在 EJS 生成的特定 Div 上应用函数

Question

我在 EJS 文件中使用 Javascript forEach 函数编写了一系列引导可折叠 Div。这些 div 都有一个按钮来展开和折叠 div。最初，按下任何按钮都会展开所有 div，但我已经设法通过索引这些 div 的 ID 来克服这个问题。

我现在的问题是我有一个单独的 JS 文件运行 jQuery。 jQuery 用于隐藏和显示特定的字体真棒图标。当 div 折叠时，它会显示一个向下箭头图标并隐藏向上箭头图标。当 div 展开时，它会显示一个向上箭头图标并隐藏向下箭头图标。我的 jQuery 激活后会将更改应用于所有 div，但我只想将其应用于我单击的 div。我简要记得我可以使用$(this)，但找不到任何可以帮助我的东西。

请在下面查看我的 JS 和 EJS 文件。

list.js

$('#collapsibleDivBtn').on('click', () => {
    var downHiddenStatus = $(".fa-caret-square-down").is("[hidden]")
    var upHiddenStatus=$(".fa-caret-square-up").is("[hidden]")
    $(".fa-caret-square-down").toggleClass('hidden')
    $(".fa-caret-square-down").attr('hidden',!downHiddenStatus)
    $(".fa-caret-square-up").toggleClass('hidden')
    $(".fa-caret-square-up").attr('hidden',!upHiddenStatus)
});

list.ejs

<!-- Start of the page -->
    <div class="container mt-3">
        <!-- Title of the page -->
        <h3>List of Racks</h3>
        
        <% data.forEach((rack, index) => { %>
        <div class="card mb-3" >
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h5 class="card-title"><strong><%= rack['Cabinet ID'] %></strong></h5>
                    </div>
                    <div>
                        <a id="collapsibleDivBtn" href="#collapsibleDiv<%= index %>" class="btn p-0" data-toggle="collapse">
                            <i class="far fa-caret-square-down text-primary bg-white"></i>
                            <i hidden class="hidden far fa-caret-square-up text-danger bg-white"></i>
                        </a>
                    </div>
                </div>
                <h6 class="card-subtitle mb-2 text-muted"><%= rack['Abbreviated Address'] %></h6>
                <hr>
                <div id="collapsibleDiv<%= index %>" class="collapse">
                    <div class="row mb-2">
                        <div class="col">
                            <p class="card-text">User Status: <br />
                                <span id="siteStatus" class="statusUpdate" ><%= rack['User Status'] %> 
                                </span>
                            </p>
                        </div>  
                        <div class="col">
                            <p class="card-text">Site Status: <br />
                                <span id="userStatus" class="statusUpdate">Online 
                                    
                                </span>
                            </p>
                        </div>  
                    </div>
                    <div class="row">
                        <div class="col d-flex justify-content-center">
                            <p class="mb-0">After Service Status: <br />
                                <span id="aft_service_status" class="statusUpdate">Unknown
                                    
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <% }); %>

    </div>

Answer 1

无需隐藏元素。只需为您的图标使用 CSS 旋转即可。

$(".container").on("click", function(){
    $(this).find("i").toggleClass("arrowUp");
});

.container{
  width: 50px;
  height: 50px;
  font-size: 50px;
}

.container i{
  transition: all 0.4s ease;
}

.arrowUp {
  transform: rotateZ(-180deg);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div>
  <a class="container">
    <i class="fa fa-arrow-down"></i>
  </a>
  <a class="container">
    <i class="fa fa-arrow-down"></i>
  </a>
  <a class="container">
    <i class="fa fa-arrow-down"></i>
  </a>
</div>