如何用JavaScript获取点击copy图标时对应flip-card-front内的p文本

问题 #

我有多个如下结构的列组件：

<div class="col-md-6 mt-3 mt-md-0">
        <div class="blog_content d-flex bg-dark text-white flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3">
            <h5 class="mb-0 border-0">નુતન વર્ષ 2023 ની શરૂઆત </h5>
            <div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0 h-100">
                <div class="flip-card h-100">
                    <div class="flip-card-inner h-100">
                        <div class="flip-card-front d-flex justify-content-center align-items-center">
                            <p class="">નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!</p>
                        </div>
                        <div class="flip-card-back d-flex justify-content-center align-items-center">
                            <p class="">nutan varsh 2023 ni<br> sharuat kaik evi thay,<br> tamar jivanam khushio felay,<br> anand mangalathi darek divas<br> pasar thay evi hardik<br> shubhakamanao !!</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="time d-flex justify-content-between align-items-center align-items-end mt-auto pt-3">
                <div class="left text-start">
                    <h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/festival/happy-new-year-2023">નવા વરસની શુભકામનાઓ</a></h6>
                    <p class="mb-0"><small>1 day ago</small></p>
                </div>
                <div class="right">
                    <span class="copy"><img src="https://stag.example.com/assets/images/copy.png" class="mx-1 social" alt="share quote" width="24" height="24"></span>
                    <a href="https://stag.example.com/gu/post/happy-new-year-2023-68400"><img src="https://stag.example.com/assets/images/share.png" class="mx-1 social" alt="share quote" width="24" height="24"></a>
                </div>
            </div>
        </div>
    </div>

需求是点击带有copy类的图标时，获取对应flip-card-front容器内<p>标签的文本。我是JavaScript新手，尝试了一小时没找到可行方案，现有代码如下：

var copy = document.getElementsByClassName('copy');
            for (var i = 0; i < copy.length; i++) {
              copy[i].addEventListener('click', function() {
                //get text   નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!
        console.log("p tag value which is inside flip-card-front");
              });
            }

解决方案 #

可以通过DOM层级关系，从点击的copy元素向上定位到共同父容器，再查找目标文本。修改后的代码如下：

const copyButtons = document.querySelectorAll('.copy');
copyButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 从当前点击元素向上找到对应的卡片容器
    const cardContainer = this.closest('.blog_content');
    // 在容器内找到flip-card-front下的p标签，获取文本
    const targetText = cardContainer.querySelector('.flip-card-front p').textContent;
    
    console.log(targetText);
    
    // 可选：如果需要把文本复制到剪贴板，添加以下代码
    // navigator.clipboard.writeText(targetText).then(() => {
    //   alert('文本已复制到剪贴板');
    // }).catch(err => {
    //   console.error('复制失败:', err);
    // });
  });
});

核心逻辑说明 #

• 用querySelectorAll替代getElementsByClassName：返回静态NodeList，遍历绑定事件更稳定。
• closest('.blog_content')：从点击元素向上查找最近的卡片容器，确保获取的是当前卡片的内容，不会干扰其他卡片。
• querySelector('.flip-card-front p')：在卡片容器内精准定位目标<p>标签，直接获取其文本内容。
• 如果需要保留原有的换行格式（将<br>转为换行符），可以替换为以下代码：

  const targetHtml = cardContainer.querySelector('.flip-card-front p').innerHTML;
  const formattedText = targetHtml.replace(/<br>/g, '\n');
  console.log(formattedText);
  

内容的提问来源于stack exchange，提问作者Manisha