Javascript 单击div元素后如何显示更多文本？

目前我正在做一个个人项目。你可以在这里看到我目前正在制作的网站：

问题是我很难添加以下特性。该功能是，当用户单击6个彩色框中的任何一个时，将显示进一步的信息部分，如下所示：

我尝试添加一个id为“无”的段落。当用户单击其中一个框时，应显示该主题的相应文本

HTML

jQuery

 $("#fbAdCampaigns").on('click', function(){
     $("#fbAdCampaignText").toggleClass("display");
     });

$(".fbAdCampaigns").on('click', function(){
  $(this).toggleClass("display"); // only target the clicked element
});

注意：我使用的是display:none而不是visibility:hide，因为我不希望隐藏文本占用空间，因为如果它占用空间，可能会弄乱6个框中每个框的结构

然而，这段代码似乎并不是我想要的，也就是说，根据单击6个框中的哪一个，显示相应的进一步信息。以这种方式单击元素后，如何显示更多文本

你是这个意思？

换衣服

$("#fbAdCampaignText").toggleClass("display")

到

如果您只想触发clicked元素中的div，那么：

$(".fbAdCampaigns").on('click', function(){
  $(this).find("#fbAdCampaignText").toggle();
});

---

好的，这里有几件事。首先，文档中不能有超过1个相同id，因此如果有6个段落，请丢失id并使用类

使用id还会给您带来特殊性问题，

.display

类仍然会被id的样式覆盖

另一件事是，在jQuery中，如果使用类，则将在所有这些元素上切换类。您需要专门为您单击的元素切换类，因此请改用

$（this）

-以您单击的元素为目标

HTML:

---

id必须是唯一的。改用类和数据属性请不要在回答问题后从问题中删除代码。如果您发布代码时出错，请标记问题以引起版主注意。当然，最好不要一开始就发布代码。@Zero201-jQuery的
.toggle（）
只在元素上添加/删除
显示：none
样式；如果您希望根据单击进行更多样式更改，那么让
.toggleClass（）
工作会更好。正如一些人指出的，理想情况下，您没有使用
id=“…”
。使用类并使用
.find（）
相对于Brett East的答案中单击的内容是一种更好的方法。作为一个个人项目，如果你将此作为一种学习体验，我强烈鼓励你学习Brett的方法，这将在未来更好地为你服务。
$("#fbAdCampaignText").toggle()

$(".fbAdCampaigns").on('click', function(){
  $(this).find("#fbAdCampaignText").toggle();
});

$(".fbAdCampaigns").on('click', function(){
  $(this).toggleClass("display"); // only target the clicked element
});