显示/隐藏时Javascript无法按预期工作

Question

我正在尝试在索引页上呈现数据库中保存的目标列表，并为 div 创建唯一的 id，我将 goal_id 添加到 id，如下所示：

    <%= for goal <- @goals do %>
      <p class="text-black block text-xl leading-snug mt-3">
        <%= goal.description %>
      </p>
       <div class="text-gray-500 dark:text-gray-400 flex mt-3">
         <div class="flex items-center mr-6" onclick="showComments()">
          <span class="ml-3"><%= Enum.count(goal.comments) %> comments</span>
         </div>
        </div>

          <div id={"goal-#{goal.id}"} class="goal_comments">
            <ul role="list" class="space-y-6">
              <li class="relative flex gap-x-4">
                <div class="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
                  <div class="w-px bg-gray-200"></div>
                </div>
                <div class="relative flex h-6 w-6 flex-none items-center justify-center bg-white">
                  <div class="h-1.5 w-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300"></div>
                </div>
              </li>
              <%= for goal_comment <- goal.comments do %>
                <li class="relative flex gap-x-4">
                  <div class="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
                    <div class="w-px bg-gray-200"></div>
                  </div>
                  
                  <div class="flex-auto rounded-md p-3 ring-1 ring-inset ring-gray-200">
                    <div class="flex justify-between gap-x-4">
                      <div class="py-0.5 text-xs leading-5 text-gray-500"><span class="font-medium text-gray-900"><%= goal_comment.creator.username %></span> commented</div>
                      
                    </div>
                    <p class="text-sm leading-6 text-gray-500"><%= goal_comment.comment %></p>
                  </div>
                </li>
              <% end %>
            </ul>
        

            <script>
              function showComments() {
                console.log("goal-<%= goal.id %>")
                var comments = document.getElementById("goal-<%= goal.id %>");

                if (comments.style.display === "none") {
                  comments.style.display = "block";
                } else {
                  comments.style.display = "none";
                }
              }
            </script>
          </div>
        </div>
      </div>
  <% end %>

我使用JS能够根据用户的要求隐藏和显示这个div。当我检查控制台时，我发现在所有 div 组件中 id 都是唯一的，问题是如果我有超过 1 个条目，这会使其成为 2 个或更多 div 组件，当我单击最后一个单词

comments

时div 组件负责显示/隐藏操作。所以，我的问题是，我做错了什么？

我还看到这些错误出现在我的控制台上：

Answer 1

您应该将具体的 id 传递给

showComments()

:

<div class="flex items-center mr-6" onclick="showComments(<%= goal.id %>)">
  <span class="ml-3"><%= Enum.count(goal.comments) %> comments</span>
</div>

然后使用该id：

<%= for goal <- @goals do %>
  <!-- ... Existing HTML code ... -->

  <script>
    function showComments(goalId) {
      var comments = document.getElementById("goal-" + goalId);

      if (comments.style.display === "none") {
        comments.style.display = "block";
      } else {
        comments.style.display = "none";
      }
    }
  </script>
<% end %>