锚标签不能正常工作快递

Question

当我点击 p 时，没有任何反应，但是当我点击 div 的任何其他部分时它工作正常。我不知道为什么会这样。请帮助我。<%- include('./partials/header');-%><%- include('./partials/flash');-%><% posts.forEach(function(post){ %><a href="/post/<%= post._id %>" id="posta"><div id="post"><h3 class="text-dark" id="title"><%- post.Title %></h3><p class="text-secondary" id="date"><small><%=post.Author.name %><br><%=post._id.getTimestamp().toLocaleDateString()%></small></p><p class="h6 text-dark" id="Postcontent"><%- post.Content.substring(0,200)+"..." %><span class="h6 text-success">Read more</span></p></div></a><span id="border"></span><% }) %><%- include('./partials/footer');-%>我使用的CSS：#post:hover{    box-shadow:  0 5px 5px 0 #4CAF50;    text-decoration: none;}#posta:hover {  text-decoration: none;}#posta:link {    text-decoration: none;  }  #posta:visited {    text-decoration: none;  }#Postcontent{  font-size: 1rem;   white-space: pre-wrap;}更新：这很奇怪，但我观察到的是，当我单击第一个项目的 p 时它不起作用，但对于所有其他项目它都有效。网站链接： https ://enlightening-blog.herokuapp.com/

Answer 1

根据您的代码。问题在于您编写 js 代码的方式。问题出在问题中提到的其他地方（感谢链接）。您犯的错误是菜鸟错误之一（永远不要将 static id 放在循环中）。id是一样的。基于 js 的工作方式，它会寻找唯一的 id，但重复的类可能没问题。所以你当前的代码是

document.getElementById("Postcontent").addEventListener("click", function(event){

  event.preventDefault();

  });

将Postcontent从 id更改为 class 并添加以下代码

var postcontent = document.querySelectorAll(".Postcontent");

postcontent.addEventListener('click', function(event){

   event.preventDefault();

});

Answer 2

@rajesh-paudel 提到了一个小错误，但很重要。

 Never user static ids in loops. 

此代码违反了标准，因此是不正确的。它会失败验证检查，它应该。

ID 必须是唯一的。阅读此处：HTML 5 的HTML 4.x 规范

When specified on HTML elements, the id attribute value must be 

unique amongst all the IDs in the element's tree and must contain at 

least one character. The value must not contain any ASCII whitespace.