如何使用 javascript 在动态数据列表中应用 css 样式？

Question

我有一个来自数据库的评论列表，并将其显示到 JSP 页面以获取特定帖子。 在该评论列表中，我只想为登录的用户添加编辑和删除选项。 如果登录的用户对该帖子发表了评论，他将看到他所做的评论的编辑和删除选项。 为此，我编写了以下代码。

           <%

                for (PostComment comment : pcList) {
            %>
            <% User userInfo = usrOp.getUserInfoById(comment.getUid());%>
            <div class="card my-2">
                <div class="card-body">
                    <h5 id="commentUser"><%= userInfo.getFirstName()%> <%= userInfo.getLastName()%></h5>
                    <p class="card-text"><%= comment.getComment()%></p>

                    <a id="actionEdit" class="mx-1 text-warning d-none">Edit</a>
                    <a id="actionDelete" href="#" class="mx-1 text-danger d-none">Delete</a>
                </div>                  
            </div>
            <%
                }
            %>

最初，我隐藏了编辑和删除按钮。 为了显示编辑和删除按钮登录用户，我尝试了两种方式。

第一种方式：我在 DAO class 中创建了一个方法，发现用户是否对该帖子发表了评论。 如果它返回真值，我尝试使用 javascript 更改 CSS 样式。 对于这种方法 javascript 代码如下。

$.ajax({
                url: "CheckUserCommentServlet",
                data: {pid: pstid, uid: usrid},
                success: function (data, textStatus, jqXHR) {
                    console.log(data);
                    let actionEdit = document.querySelector("#actionEdit");
                    let actionDelete = document.getElementById('actionDelete');
                    if(data.trim() === 'true' ){
                        actionEdit.classList.remove('d-none');
                        actionDelete.classList.remove('d-none');
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {

                }
            });

第二种方式：在这种方法中，我使用 for 循环扫描列表并尝试从评论中找出名称。 如果该名称等于记录的用户名，则尝试更改 CSS 样式以进行编辑和删除操作。 对于这种方法 javascript 代码如下：

            let actionEdit = document.querySelector("#actionEdit");
            let actionDelete = document.getElementById('actionDelete');

            let loggedUser = document.getElementById('loggedUserName');
            console.log(loggedUser.textContent);

            let commentuser = document.querySelectorAll('#commentUser');

            commentuser.forEach(e=>{
                console.log(e.textContent);
                if(e.textContent.trim() == loggedUser.textContent.trim()){
                    console.log("you did the comment");
                    actionEdit.classList.remove('d-none');
                }
            });

这两个代码仅适用于顶级评论。 它不检查此评论是否由登录用户完成。 检查屏幕截图。

如果我在这段代码中犯了错误，请帮助我找出答案。 或者如果您有新的解决方法，也可以向我提出建议。

Answer 1

我在这里得到了解决方案我们不需要编写一行 javascript 代码。 只需使用 if 语句。 只是代码行下面的那些。

   <% 
          if (comment.getUid() == user.getId()) {%>
             <a href="#" class="mx-1 text-warning">Edit</a>
             <a href="#" class="mx-1 text-danger">Delete</a>
   <%}%>