如何使用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类中创建了一个方法，并发现用户是否对该帖子发表了评论。如果返回true值，则尝试使用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>
   <%}%>