在不同的section上分别打开和关闭相同的class元素

Question

我有从数据库中填充数据的帖子部分。下面是post部分的标记。文章大多是样本数据

<div class="q_posts">
<div class="q_post_title">
<span>Post 1</span>
</div>
<div class="post_description">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi, nihil! Eligendi sed voluptate suscipit animi debitis voluptates ducimus, dolorum accusamus?
</div>
<a class="link-share-post" title="share a link to this post">Share</a>
<input type="text" name="link-share-post-input" class="ps_input link-share-an" id="link-share-post-<?php echo $data['post_id']; ?>" value="">
</div>

这个部分被放置在while循环中，一旦数据库中有新数据，它就会在浏览器上持续呈现。

现在，a tag与link-share-post有一个click event显示input below it, one with the link-share-an class，这个事件工作正常，输入显示一旦我点击锚标记，问题来了，当有一个以上的q_posts类的部分，在第一部分的链接工作良好，但在第二个和随后的部分没有

这是我的javascript

const anLinkShareBtn = document.querySelector(".link-share-post");
const anLinkShareOutput = document.querySelector(".link-share-an");
anLinkShareBtn.addEventListener("click", function showAnLink() {
anLinkShareOutput.style.display = "block";
anLinkShareOutput.value = "http://localhost/shareposts/posts";
});

我需要能够打开隐藏的输入一旦我在不同的帖子部分上独立点击每个链接

Answer 1

您的问题来自于您使用querySelector选择你的元素。querySelector选择文档树中的第一个匹配项，这意味着当有多个元素具有相同的类时，它只适用于第一个。

解决这个问题的一种方法是通过使用querySelectorAll来选择具有这个类名(link-share-post)的所有元素。，循环遍历它们，并为其中的每个元素添加一个单击事件侦听器。然后，要选择正确的输入元素，只需选择下一个兄弟元素。它看起来像这样:

const links = document.querySelectorAll(".link-share-post");
for (let i = 0; i < links.length; i +=1) {
const link = links[i];
link.addEventListener("click", function () {
link.nextElementSibling.style.display = "block";
link.nextElementSibling.value = "http://localhost/shareposts/posts";
});
}