时间戳

首页 > 解决方案 > 独立打开和关闭不同部分的相同类元素

javascript - 独立打开和关闭不同部分的相同类元素

问题描述

我的帖子部分填充了数据库中的数据。这是帖子部分的标记。这些帖子大多是样本数据

<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 tagwithlink-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";
});

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

标签： javascriptphphtml

解决方案

您的问题来自您使用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";
    });
}

推荐阅读