Javascript 单击滑块内的图像以显示文本

在上，我正试图找到一种方法，当你在手机上点击一个图像时，它会使文本显示在它下面，并显示一个按钮。然后，如果你再次点击它，它就会消失

我在JS中尝试了常用的方法，但似乎都不起作用。任何关于我如何实现这一点的想法都将非常棒

一个例子是这样的——但在手机上点击图像

按要求关闭JSFIDLE：

  $(function () {
        var div = $('#showOrHideDiv');
        $('#action').click(function () {
            div.fadeToggle(1000);
        });
    });

<a id="action" href="#">hide/show text</a>
<div id="showOrHideDiv" style="display: none;">hidden text</div>

根据需要关闭JSFIDLE的HTML：

  $(function () {
        var div = $('#showOrHideDiv');
        $('#action').click(function () {
            div.fadeToggle(1000);
        });
    });

<a id="action" href="#">hide/show text</a>
<div id="showOrHideDiv" style="display: none;">hidden text</div>

隐藏文本

它需要添加到图像上的文本之外，如下所示，需要显示文本和按钮

谢谢

检查此选项

我想这就是你要找的

HTML

<figure class = "figure">
    <img src = "http://icons.iconarchive.com/icons/dapino/summer-holiday/96/photo-icon.png" />
    <figcaption class = "figcaption">
        SOME TEXT HERE    
    </figcaption>
</figure>

jQuery

$(document).ready(function(){
$(".figure").click(function(){
    $(".figcaption").toggle();
});
});

---

我检查了您提供的站点的源代码，您需要添加此代码以获得所需的效果。我假设您希望在每个图像上显示/隐藏文本

var elems = $('#my_horizontal_main_stage li');
elems.find('div').hide(); // text hidden by default, or you can use css
elems.on('click', function(e){
    el = $(this);
    el.find('div').fadeToggle('fast');
})

---

你的代码出了什么问题？小提琴似乎在工作？这只是我想做的一个例子，但它在当前设置中不起作用。如果我们不知道当前设置，我们将如何帮助你？小提琴似乎在工作。。只需将隐藏/显示替换为图像…这是移动文本，我需要的是在图像上显示新文本单击！如果你想要这样的东西，那么检查我的编辑：）检查小提琴，它被编辑了嘿，老兄，试过了，但给出了我在边框上使用的图像，点击后什么也没有发生。也许和我使用的滑块有关？我还将此处的一些文本移出了slider DIV，但破坏了slider，但与下面显示的文本一样工作。您可以删除并仅使用标记。如果你能给我看一下代码，那将是一个更好的帮助。我愿意帮助你。嗨！感谢这一点，但我需要的是新的文本出现在下面，已经更新了我原来的帖子显示这一点。