Как применить стиль css в динамическом списке c данных, используя javascript?

Question

У меня есть список комментариев из базы данных и отображение его на странице JSP для определенного сообщения c. В этом списке комментариев я хочу добавить параметры редактирования и удаления только для зарегистрированных пользователей. если зарегистрированный пользователь сделал комментарий к этому сообщению, он увидит опцию редактирования и удаления комментария, который он сделал. для этого я пишу следующий код:

           <%

                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>
            <%
                }
            %>

изначально я скрываю кнопку редактирования и удаления. Чтобы показать, что кнопка «Редактировать и удалить» зарегистрированного пользователя я пробовал двумя способами.

1-й способ: Я создал метод в классе DAO и выяснил, прокомментировал ли пользователь этот пост или нет , если он возвращает true значение, я пытаюсь изменить стиль CSS, используя javascript. для этого метода 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) {

                }
            });

2-й способ: в этом методе я сканирую список, используя для l oop и пытался найти имя из комментария , если это имя совпадает с именем зарегистрированного пользователя, то пытается изменить стиль 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>
   <%}%>