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

【问题标题】：how to apply css style in a dynamic list of data using javascript?如何使用 javascript 在动态数据列表中应用 css 样式？
【发布时间】：2020-08-09 04:57:03
【问题描述】：

我有一个来自数据库的 cmets 列表，并将其显示到特定帖子的 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');
                }
            });

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

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

【问题讨论】：

id 属性值必须是唯一的。只能使用第一次出现的 id 值。文档中多次出现的元素应使用class 属性进行标记。
@EmielZuurbier 如果我使用类，那么它默认为两者都隐藏
你可以有 id，它们必须是唯一的。
在你的 JSP 模板中循环每个评论，就像你已经做的那样，检查评论用户的 id 是否等于登录用户的 id。然后在此基础上添加或不添加按钮。但不要为按钮赋予相同的id 属性值。

标签： javascript jquery css jsp servlets

【解决方案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>
   <%}%>

【讨论】：