锚标签不能正常工作快递

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){&nbsp; event.preventDefault();&nbsp; });将Postcontent从 id更改为 class 并添加以下代码var postcontent = document.querySelectorAll(".Postcontent");postcontent.addEventListener('click', function(event){&nbsp; &nbsp;event.preventDefault();});

Answer 2

@rajesh-paudel 提到了一个小错误，但很重要。&nbsp;Never user static ids in loops.&nbsp;此代码违反了标准，因此是不正确的。它会失败验证检查，它应该。ID 必须是唯一的。阅读此处：HTML 5&nbsp;的HTML 4.x 规范When specified on HTML elements, the id attribute value must be&nbsp;unique amongst all the IDs in the element's tree and must contain at&nbsp;least one character. The value must not contain any ASCII whitespace.