Javascript 单击图像时添加文本框

$（文档）.ready（函数（）{
$（“.trigger”）。单击（函数（）{
$（“.menu”）.toggleClass（“活动”）；
});
});
html，正文
{
身高：100%；
溢出：隐藏；
}
.absolute center、.menu、.menu.btn.fa、.menu.btn.trigger.line
{
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：translateX（-50%）translateY（-50%）；
转化：translateX（-50%）translateY（-50%）；
}
.菜单
{
宽度：5em；
身高：5公分；
}
.menu.btn
{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
边界半径：50%；
背景：rgba（255,255,255,0.5）；
不透明度：0；
z指数：-10；
光标：指针；
-webkit转换：不透明度1s，z指数0.3s，-webkit转换1s；
转换：不透明度2s，z指数1s，-webkit转换1s；
过渡：不透明度2s，z指数1s，变换1s；
转换：不透明度2s，z指数1s，转换1s，-webkit转换1s；
-webkit转换：translateX（0）；
变换：translateX（0）；
}
.menu.btn.trigger{
不透明度：1；
z指数：100；
光标：指针；
-webkit转换：-webkit转换0.3s；
转换：-webkit转换0.3s；
转换：转换0.3s；
转换：转换0.3s，-webkit转换0.3s；
内容：url（/home/curiousfool/Downloads/Exxo/images/a.jpg）；
}
.menu.btn.trigger:悬停
{
-webkit转换：比例（1.5）；
转换：比例（1.5）；
}
.菜单.旋转器
{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
-webkit转换来源：50%50%；
变换原点：50%50%；
}
.menu.active.btn图标
{
不透明度：1；
z指数：50；
}
.旋转器：第n个子（1）
{
-webkit变换：旋转（-45度）；
变换：旋转（-45度）；
}
.menu.active.rotater:第n个子项（1）.btn图标
{
-webkit变换：translateY（-12em）旋转（45度）；
变换：translateY（-12em）旋转（45度）；
内容：url（/home/curiousfool/Downloads/Exxo/images/12.jpg）；
对齐：顶部；
}
.旋转器：第n个孩子（2）
{
-webkit变换：旋转（45度）；
变换：旋转（45度）；
}
.menu.active.rotater:第n个子项（2）.btn图标
{
-webkit变换：translateY（-12em）旋转（-45度）；
变换：translateY（-12em）旋转（-45度）；
内容：url（/home/curiousfool/Downloads/Exxo/images/22.jpg）；
对齐：顶部；
}
.旋转器：第n个孩子（3）
{
-webkit变换：旋转（135度）；
变换：旋转（135度）；
}
.menu.active.rotater:第n个子项（3）.btn图标
{
-webkit变换：translateY（-12em）旋转（-135度）；
变换：translateY（-12em）旋转（-135度）；
内容：url（/home/curiousfool/Downloads/Exxo/images/sun.jpg）；
对齐：顶部；
}
.旋转器：第n个孩子（4）
{
-webkit变换：旋转（225度）；
变换：旋转（225度）；
}
.menu.active.rotater:第n个子项（4）.btn图标
{
-webkit变换：translateY（-12em）旋转（-225deg）；
变换：translateY（-12em）旋转（-225deg）；
内容：url（/home/curiousfool/Downloads/Exxo/images/heart.jpg）；
对齐：顶部；
}
.menu.active.rotater:第n个子项（4）.btn图标
{
-webkit变换：translateY（-12em）旋转（-225deg）；
变换：translateY（-12em）旋转（-225deg）；
内容：url（/home/curiousfool/Downloads/Exxo/images/heart.jpg）；
对齐：顶部；
}


你好


这


多杰


是

当你说“最后一张图片”时，你的意思是在点击时出现的4张图片的顶部

如果是这样的话，你就有办法让它发挥作用

添加带有背景图像的图像：

 /* Old version : 
   content:url(/home/curiousfool/Downloads/Exxo/images/12.jpg); */

   background-image:url("path_to_your_image");
   background-size:cover;

然后在
.btn图标中添加一些文本：

<div class="rotater">
  <div class="btn btn-icon" title="Wish Good Morning to your Family">
    <p class="text-box">
       Doge
    </p>
  </div>
</div>

下面是一个JSFIDLE：

注意：如果希望文本仅在单击时显示：

/* Replace this part : */
.text-box:hover{
  opacity:1;
}
/* With this : */
.showText{
  opacity:1;
}

然后使用jQuery：

$(".text-box").click(function(){
  $(this).toggleClass("showText");
})

我们可以看看你的代码吗？你需要发布最小的，完整的，可验证的代码，我们才能提供帮助。请参阅此链接以获取可能与您的问题无关的帮助。图像仍然与元素关联。我添加了代码。如果你能帮助我，请告诉我这是你想要显示的文本哦，我只是错过了侦听器末尾的一个
）
。查看我的编辑。即使我只是错过了：(
$(".text-box").click(function(){
  $(this).toggleClass("showText");
})